zfb_mp/src/views/devices/list.vue

<template>
  <div class="p-4">
    <BasicTable @register="registerTable">
      <template #toolbar>
        <a-button type="primary" @click="openAddModal">{{
          t('routes.devices.addCamera')
        }}</a-button>
      </template>

      <template #cameraType="{ record }">
        <Tag color="green">{{ rendercameraTypeLabel(record.cameraType) }} </Tag></template
      >
      <template #Time="{ record }">
        <Time v-if="record.activatedTime" :value="record.activatedTime" mode="datetime" />
      </template>
      <template #own="{ record }">
        {{ renderOwnTypeLabel(record.own) }}
      </template>

      <!-- {
              icon: 'ant-design:delete-outlined',
              color: 'error',
              label: t('common.delText'),
              popConfirm: {
                title: t('common.delConfirm'),
                confirm: () => {
                  createMessage.info(t('common.notConnect'));
                },
              },
            }, -->
      <template #action="{ record }">
        <TableAction
          :actions="[
            {
              label: t('common.edit'),
              onClick: handleEditScenes.bind(null, record),
            },
            {
              label: t('common.unbind'),
              ifShow: !!record.userName,
              popConfirm: {
                title: t('routes.corporation.isUnBind'),
                confirm: handleUnbindDevice.bind(null, record),
              },
            },
          ]"
        />
      </template>
    </BasicTable>
    <AddModal @update="reload" @register="registerAddModal" />
    <EditModal @register="registerEditModal" @update="reload" />
  </div>
</template>
<script lang="ts">
  import { defineComponent } from 'vue';
  import { BasicTable, useTable, BasicColumn, FormProps, TableAction } from '/@/components/Table';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { Time } from '/@/components/Time';
  import { Tag } from 'ant-design-vue';
  import { useModal } from '/@/components/Modal';
  import { ListApi, unDeviceApi } from '/@/api/device/list';
  import AddModal from './AddModal.vue';
  import EditModal from './EditModal.vue';
  import { useI18n } from '/@/hooks/web/useI18n';
  // import { RoleEnum } from '/@/enums/roleEnum';

  // param type 0
  export default defineComponent({
    components: { BasicTable, TableAction, Tag, AddModal, EditModal, Time },
    setup() {
      const { createMessage } = useMessage();
      const [registerAddModal, { openModal: openAddModal }] = useModal();
      const [registerEditModal, { openModal: openEditModal }] = useModal();
      const { t } = useI18n();
      const columns: BasicColumn[] = [
        {
          title: t('routes.devices.childName'),
          dataIndex: 'childName',
          fixed: 'left',
          width: 220,
        },
        {
          title: t('routes.devices.phoneName'),
          dataIndex: 'userName',
          width: 230,
        },
        {
          title: t('routes.devices.companyId'),
          dataIndex: 'companyName',
          ifShow: false,
          width: 260,
        },
        {
          title: t('routes.devices.cameraType'),
          dataIndex: 'cameraType',
          width: 230,
          slots: { customRender: 'cameraType' },
        },
        {
          title: t('routes.devices.snCode'),
          dataIndex: 'snCode',
          width: 120,
        },
        {
          title: t('routes.devices.wifiName'),
          dataIndex: 'wifiName',
          width: 180,
        },
        {
          title: t('routes.devices.activationTime'),
          dataIndex: 'activatedTime',
          slots: { customRender: 'Time' },
          width: 150,
        },
        {
          title: t('routes.devices.shipmentType'),
          dataIndex: 'own',
          slots: { customRender: 'own' },
          width: 120,
        },
        {
          title: t('common.operating'),
          dataIndex: 'action',
          slots: { customRender: 'action' },
          // auth: [RoleEnum.SUPER, RoleEnum.PLAT_ADMIN],
          width: 130,
        },
      ];

      const searchForm: Partial<FormProps> = {
        labelWidth: 100,
        schemas: [
          // {
          //   field: 'part',
          //   component: 'Select',
          //   label: t('routes.devices.deviceList'),
          //   defaultValue: '1',
          //   colProps: {
          //     span: 4,
          //   },
          //   componentProps: {
          //     options: [
          //       {
          //         label: '全部',
          //         value: '1',
          //         key: '1',
          //       },
          //       {
          //         label: '正常',
          //         value: '2',
          //         key: '2',
          //       },
          //       {
          //         label: '已关闭',
          //         value: '2',
          //         key: '2',
          //       },
          //     ],
          //   },
          // },
          {
            field: 'searchKey',
            label: '关键字',
            labelWidth: 80,
            component: 'Input',
            componentProps: {
              maxLength: 100,
              placeholder: '支持搜索 手机号、sn码',
            },
            colProps: {
              span: 12,
            },
          },
        ],
      };
      // { getForm }
      const [registerTable, { reload }] = useTable({
        title: t('routes.devices.deviceList'),
        api: ListApi,
        columns: columns,
        useSearchForm: true,
        formConfig: searchForm,
        showTableSetting: true,
        tableSetting: { fullScreen: true },
        showIndexColumn: false,
        rowKey: 'id',
        fetchSetting: {
          pageField: 'page',
          sizeField: 'limit',
          listField: 'list',
          totalField: 'totalCount',
        },
        handleSearchInfoFn: function (searchData) {
          if (searchData.fieldTime) {
            searchData.startDate = searchData.fieldTime[0];
            searchData.endDate = searchData.fieldTime[1];
            delete searchData.fieldTime;
          }
          return searchData;
        },
      });
      function handleEditScenes(record: Recordable) {
        console.log('record', record);
        openEditModal(true, record);
      }
      async function handleUnbindDevice(record: Recordable) {
        await unDeviceApi({
          childName: record.childName,
        });
        createMessage.success(t('common.optSuccess'));
        reload();
      }
      function rendercameraTypeLabel(cameraType: number): string {
        switch (cameraType) {
          case 4:
            return '四维看看Pro八目相机';
          case 1:
            return '四维看看Lite双目相机';
          case 9:
            return '四维看看双目转台相机';
          case 10:
            return '四维看看激光相机';
          case 6:
            return '第三方相机';
          default:
            return '';
        }
      }
      function renderOwnTypeLabel(type: number): string {
        switch (type) {
          case 0:
            return '正常销售';
          case 2:
            return '礼品赠送';
          case 1:
            return '员工自用';
          case 3:
            return '其它';
          default:
            return '';
        }
      }

      return {
        registerTable,
        createMessage,
        rendercameraTypeLabel,
        renderOwnTypeLabel,
        registerAddModal,
        openAddModal,
        handleUnbindDevice,
        handleEditScenes,
        registerEditModal,
        t,
        reload,
      };
    },
  });
</script>