zfb_mp/src/views/scenes/live.vue

<template>
  <div class="p-4">
    <BasicTable @register="registerTable" :rowSelection="{ type: 'checkbox' }">
      <template #toolbar>
        <a-button type="primary" @click="handleAddLiveScene"> 新增</a-button>
        <!-- <a-button type="primary" color="warning" @click="() => {}"> 编辑</a-button>
        <a-button type="primary" color="error" @click="() => {}"> 删除</a-button> -->
      </template>
      <template #cover="{ record }">
        <TableImg
          :size="150"
          :simpleShow="true"
          :imgList="[record.appListPicUrl || '/resource/img/pic_bg@2x.png']"
        />
      </template>
      <template #houseType="{ record }">
        {{ renderHouseType(Number(record.type)) }}
      </template>

      <template #action="{ record }">
        <TableAction
          :actions="[
            {
              icon: 'eos-icons:role-binding',
              label: t('routes.scenes.bindAnchor'),
              color: 'success',
              onClick: handleBindAnchor.bind(null, record),
            },
            {
              icon: 'ant-design:delete-outlined',
              color: 'warning',
              label: '编辑',
              onClick: handleEditLiveScene.bind(null, record),
            },
            {
              icon: 'ant-design:delete-outlined',
              color: 'error',
              label: '删除',
              popConfirm: {
                title: '是否确认删除',
                confirm: handleDeleteLiveScene.bind(null, record),
              },
            },
          ]"
        />
      </template>
    </BasicTable>
    <bindModal @register="registerBindModal" @success="reload" />
    <addLiveModal @register="registeraddLiveModal" />
    <LiveDrawer @register="registerLiveDrawer" @success="reload" />
  </div>
</template>
<script lang="ts">
  import { defineComponent } from 'vue';
  import {
    BasicTable,
    useTable,
    BasicColumn,
    // FormSchema,
    FormProps,
    TableAction,
    TableImg,
  } from '/@/components/Table';
  import { useMessage } from '/@/hooks/web/useMessage';
  // import { uploadApi } from '/@/api/sys/upload';
  import { Tag } from 'ant-design-vue';
  import { h } from 'vue';
  import { ListApi, brandTypeListApi, LiveSceneDeleteApi } from '/@/api/scene/live';
  import { useI18n } from '/@/hooks/web/useI18n';

  import { useModal } from '/@/components/Modal';
  import { useDrawer } from '/@/components/Drawer';
  import bindModal from './bindModal.vue';

  import LiveDrawer from './liveDrawer.vue';
  export default defineComponent({
    components: { BasicTable, TableAction, TableImg, bindModal, LiveDrawer },
    setup() {
      const { createMessage } = useMessage();
      const { t } = useI18n();
      const [registerBindModal, { openModal: openBindModal }] = useModal();

      const [registerLiveDrawer, { openDrawer: openLiveDrawer }] = useDrawer();

      const columns: BasicColumn[] = [
        {
          title: 'ID',
          dataIndex: 'id',
          fixed: 'left',
          width: 100,
        },
        {
          title: t('routes.scenes.anchorRoom'),
          dataIndex: 'name',
          ellipsis: false,
          width: 130,
        },
        {
          title: t('common.type'),
          dataIndex: 'type',
          slots: { customRender: 'houseType' },
          width: 100,
        },
        {
          title: '场景名称',
          dataIndex: 'sceneName',
          width: 140,
        },
        {
          title: t('routes.scenes.appListPicUrl'),
          dataIndex: 'appListPicUrl',
          slots: { customRender: 'cover' },
          width: 150,
        },
        {
          title: t('routes.scenes.sortOrder'),
          dataIndex: 'sortOrder',
          width: 150,
          sorter: true,
        },
        {
          title: t('routes.scenes.webSite'),
          dataIndex: 'liveRoomUrl',
          slots: { customRender: 'link' },
          width: 180,
        },
        {
          title: t('routes.scenes.bindShowerNameList'),
          dataIndex: 'bindShowerNameList',
          ellipsis: false,
          width: 180,
        },

        {
          title: t('routes.scenes.livestreamStatus'),
          dataIndex: 'livestreamStatus',
          width: 180,
          customRender: ({ record }) => {
            const enable = record.livestreamStatus === 1;
            const color = enable ? 'green' : 'red';
            const text = enable ? t('common.yes') : t('common.no');
            return h(Tag, { color: color }, () => text);
          },
        },

        {
          title: t('common.operation'),
          dataIndex: '',
          slots: { customRender: 'action' },
          width: 250,
          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: 'type',
            label: t('common.type'),
            component: 'ApiSelect',
            colProps: {
              xl: 5,
              xxl: 5,
            },
            componentProps: {
              api: brandTypeListApi,
              resultField: 'list',
              labelField: 'name',
              valueField: 'brandType',
              params: {
                page: 1,
                limit: 1000,
              },
            },
          },
          {
            field: 'livestreamStatus',
            label: t('routes.scenes.livestreamStatus'),
            component: 'Select',
            colProps: {
              xl: 5,
              xxl: 5,
            },
            componentProps: {
              options: [
                {
                  label: t('common.all'),
                  value: '',
                  key: '0',
                },
                {
                  label: t('common.yes'),
                  value: 1,
                  key: '1',
                },
                {
                  label: t('common.no'),
                  value: 0,
                  key: '2',
                },
              ],
            },
          },
        ],
      };

      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: ListApi,
        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 };
        },
        // defSort: {
        //   field: 'order',
        //   order: 'asc',
        // },
      });

      function handleBindAnchor(record: Recordable) {
        openBindModal(true, record);
      }

      function handleAddLiveScene() {
        openLiveDrawer(true, {
          isUpdate: false,
        });
      }
      function handleEditLiveScene(record: Recordable) {
        openLiveDrawer(true, {
          record,
          isUpdate: true,
        });
      }
      async function handleDeleteLiveScene(record: Recordable) {
        try {
          const id = [record.id];
          const res = await LiveSceneDeleteApi(id);
          console.log('res', res);
          // createMessage.success(t('common.optSuccess'));
          reload();
        } catch (error) {}
      }
      return {
        registerTable,
        createMessage,
        renderHouseType,
        t,
        registerBindModal,
        handleBindAnchor,

        reload,
        registerLiveDrawer,
        handleAddLiveScene,
        handleDeleteLiveScene,
        handleEditLiveScene,
      };
    },
  });
</script>