4dkk_mp/src/views/product/rtk/rtklist.vue

<template>
  <PageWrapper contentClass="testPageWrapper">
    <template #footer>
      <a-tabs v-model:activeKey="activeKey" @change="changeTable">
        <a-tab-pane :key="0" tab="RTK设备管理" />
        <a-tab-pane :key="1" tab="账号使用日志" />
      </a-tabs>
    </template>
    <div>
      <BasicTable v-show="activeKey == 1" @register="registerlogTable" />
      <BasicTable v-show="activeKey == 0" @register="registerTable">
        <template #toolbar>
          <a-button type="primary" @click="handleEdit" v-if="getCheckPerm('rtk-add')"
            >新增</a-button
          >
        </template>
        <template #copy="{ record }">
          <a @click="handleCopy(record.authorizeKey)">
            {{ record.authorizeKey }}
          </a>
        </template>
        <template #action="{ record }">
          <TableAction
            :actions="[
              //{
              //  label: record.status ? '取消激活' : '激活',
              //  ifShow: getCheckPerm('rtk-activation'),
              //  onClick: handleActive.bind(null, record),
              //},
              {
                label: '编辑',
                ifShow: getCheckPerm('rtk-updata'),
                onClick: handleEdit.bind(null, record),
              },
              {
                label: '删除',
                color: 'error',
                ifShow: getCheckPerm('rtk-delete'),
                onClick: handleDelete.bind(null, record),
              },
            ]"
          />
        </template>
      </BasicTable>
      <AddModal @register="register" @update="reload" />
    </div>
  </PageWrapper>
</template>
<script lang="ts">
  import { defineComponent, h, ref } from 'vue';
  import { PageWrapper } from '/@/components/Page';
  import {
    BasicTable,
    useTable,
    TableAction,
    BasicColumn,
    TableImg,
    FormProps,
  } from '/@/components/Table';
  import { rtkInfoList, rtkdelOrEdit, activation, rtksaveOrEdit } from '/@/api/product';
  import { useModal } from '/@/components/Modal';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { copyTextToClipboard } from '/@/hooks/web/useCopyToClipboard';
  import AddModal from './AddenvModal.vue';
  import { Tabs } from 'ant-design-vue';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { usePermissionStore } from '/@/store/modules/permission';
  import { incrementUseTypeList } from '/@/api/account';
  import { rtklogColumns, rtklogsearchForm } from './data';
  import { rtkUseLogList } from '/@/api/rtk';
  import { Switch } from 'ant-design-vue';
  export default defineComponent({
    components: {
      BasicTable,
      AddModal,
      TableAction,
      TableImg,
      Switch,
      PageWrapper,
      [Tabs.name]: Tabs,
      [Tabs.TabPane.name]: Tabs.TabPane,
    },
    setup() {
      const { t } = useI18n();
      const activeKey = ref(0);
      const { createMessage, createConfirm } = useMessage();
      const permissionStore = usePermissionStore();
      const { getCheckPerm } = permissionStore;
      const [register, { openModal }] = useModal();
      const columns: BasicColumn[] = [
        {
          title: '相机sn',
          ellipsis: true,
          dataIndex: 'cameraSnCode',
          width: 100,
        },
        {
          title: '板卡类型',
          dataIndex: 'rtkType',
          ellipsis: true,
          width: 120,
          customRender: ({ record }) => {
            let obj = {
              0: '千寻板卡千寻账号',
              1: '千寻板卡移动账号',
              2: '北云板卡移动账号',
            };
            return obj[record.rtkType] || '-';
          },
        },
        {
          title: '板卡sn号',
          ellipsis: true,
          dataIndex: 'rtkSnCode',
          width: 150,
        },
        {
          title: '深光rtk插件sn',
          ellipsis: true,
          dataIndex: 'sgRtkSn',
          width: 120,
        },
        {
          title: '运营商',
          ellipsis: true,
          dataIndex: 'operator',
          width: 120,
        },
        {
          title: 'IP地址',
          ellipsis: true,
          dataIndex: 'ipAddr',
          width: 100,
        },
        {
          title: '挂载点',
          ellipsis: true,
          dataIndex: 'mountPoint',
          width: 120,
        },
        {
          title: '端口',
          ellipsis: true,
          dataIndex: 'port',
          width: 50,
        },
        {
          title: '用户名称',
          ellipsis: true,
          dataIndex: 'userName',
          width: 120,
        },
        {
          title: '创建人',
          ellipsis: true,
          dataIndex: 'createNickName',
          width: 100,
        },
        {
          title: '创建时间',
          ellipsis: true,
          dataIndex: 'createTime',
          width: 160,
        },
        {
          title: '到期日期',
          ellipsis: true,
          dataIndex: 'failureTime',
          width: 160,
        },
        {
          title: 'RTK使用状态',
          dataIndex: 'status',
          width: 100,
          // ifShow: getCheckPerm('recruit-publish'),
          customRender: ({ record }) => {
            if (!Reflect.has(record, 'pendingStatus')) {
              record.pendingStatus = false;
            }
            return h(Switch, {
              checked: record.status === 0,
              checkedChildren: '正常',
              unCheckedChildren: '禁用',
              loading: false,
              onChange: async (checked: boolean) => {
                record.pendingStatus = true;
                const status = checked ? 0 : 1;
                Reflect.set(record, 'status', status);
                await rtksaveOrEdit({ ...record, status: status });
                createMessage.success('操作成功');
                // reload()
              },
            });
          },
        },
      ];
      const searchForm: Partial<FormProps> = {
        labelWidth: 100,
        autoSubmitOnEnter: true,
        schemas: [
          {
            field: 'cameraSn',
            label: '相机Sn',
            component: 'Input',
            colProps: {
              xl: 8,
              xxl: 8,
            },
          },
          {
            field: 'rtkSnCode',
            label: '板卡sn号',
            component: 'Input',
            colProps: {
              xl: 8,
              xxl: 8,
            },
          },
          {
            field: 'userName',
            label: '用户名称',
            component: 'Input',
            colProps: {
              xl: 8,
              xxl: 8,
            },
          },
          {
            field: 'operator',
            label: '运营商',
            component: 'Input',
            colProps: {
              xl: 8,
              xxl: 8,
            },
          },
          {
            field: 'sgRtkSn',
            label: '深光rtk插件sn',
            component: 'Input',
            colProps: {
              xl: 8,
              xxl: 8,
            },
          },
        ],
      };
      const [registerTable, { reload: reload0 }] = useTable({
        api: rtkInfoList,
        title: 'rtk列表',
        columns: columns,
        useSearchForm: true,
        showIndexColumn: true,
        formConfig: searchForm,
        showTableSetting: true,
        fetchSetting: {
          pageField: 'pageNum',
          sizeField: 'pageSize',
          listField: 'list',
          totalField: 'total',
        },
        actionColumn: {
          width: 160,
          title: '操作',
          dataIndex: 'action',
          slots: { customRender: 'action' },
        },
        rowKey: 'id',
        canResize: false,
      });
      const [registerlogTable, { reload: reload1 }] = useTable({
        api: rtkUseLogList,
        title: '账号使用日志',
        columns: rtklogColumns,
        useSearchForm: true,
        showIndexColumn: false,
        formConfig: rtklogsearchForm,
        showTableSetting: true,
        fetchSetting: {
          pageField: 'pageNum',
          sizeField: 'pageSize',
          listField: 'list',
          totalField: 'total',
        },
        rowKey: 'id',
        canResize: false,
      });
      async function handleDelete(record) {
        createConfirm({
          iconType: 'warning',
          title: () => h('span', '温馨提示'),
          content: () => h('span', '确定要删除吗？'),
          onOk: async () => {
            await rtkdelOrEdit({ id: record.id });
            reload();
            createMessage.success(t('common.optSuccess'));
          },
        });
      }
      function handleCopy(str: string) {
        copyTextToClipboard(str);
        createMessage.success('复制成功');
      }
      function handleActive(record) {
        createConfirm({
          iconType: 'warning',
          title: () => h('span', '温馨提示'),
          content: () => h('span', `确定要${record.status ? '禁用' : '激活'}吗？`),
          onOk: async () => {
            await activation({ id: record.id, status: record.status ? 0 : 1 });
            reload();
            createMessage.success(t('common.optSuccess'));
          },
        });
      }
      function handleEdit(record = {}) {
        openModal(true, {
          ...record,
          authorizeTime: `${record.authorizeTime || '10'}_${record.authorizeTimeUnit || '1'}`,
        });
      }
      function reload() {
        if (activeKey.value == 0) {
          reload0();
        } else if (activeKey.value == 1) {
          reload1();
        }
      }
      return {
        registerTable,
        handleCopy,
        handleDelete,
        reload,
        register,
        handleActive,
        getCheckPerm,
        handleEdit,
        registerlogTable,
        activeKey,
      };
    },
  });
</script>