4dkk_mp/src/views/empower/apilist.vue

<template>
  <div>
    <BasicTable @register="registerTable">
      <template #toolbar>
        <a-button type="primary" @click="handleEdit" v-if="getCheckPerm('empowerApi-add')"
          >新增</a-button
        >
      </template>
      <template #copy="{ text }">
        <a @click="handleCopy(text)">
          {{ text }}
        </a>
      </template>
      <template #action="{ record }">
        <TableAction
          :actions="[
            {
              label: '删除',
              color: 'error',
              ifShow: getCheckPerm('empowerApi-delete'),
              onClick: handleDelete.bind(null, record),
            },
          ]"
        />
      </template>
    </BasicTable>
    <AddModal @register="register" @update="reload" />
  </div>
</template>
<script lang="ts">
  import { defineComponent, h } from 'vue';
  import { BasicTable, useTable, TableAction, BasicColumn, FormProps } from '/@/components/Table';
  import { authorizeOpenApilist, authorizeOpenApidelete, authorizeOpenApiupdate } from '/@/api/authorizeModeling';
  import { useModal } from '/@/components/Modal';
  import { useI18n } from '/@/hooks/web/useI18n';
  import AddModal from './modal/api/AddApiModal.vue';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { usePermissionStore } from '/@/store/modules/permission';
  import { copyTextToClipboard } from '/@/hooks/web/useCopyToClipboard';
  import { incrementUseTypeList } from '/@/api/account';
  import { Switch } from 'ant-design-vue';
  export default defineComponent({
    components: {
      BasicTable,
      AddModal,
      TableAction,
    },
    setup() {
      const { t } = useI18n();
      const { createMessage, createConfirm } = useMessage();
      const permissionStore = usePermissionStore();
      const { getCheckPerm } = permissionStore;
      const [register, { openModal }] = useModal();
      const columns: BasicColumn[] = [
        {
          title: 'API KEY',
          ellipsis: true,
          slots: { customRender: 'copy' },
          dataIndex: 'apiKey',
          width: 200,
        },
        {
          title: '生效时间',
          ellipsis: true,
          dataIndex: 'effectTime',
          width: 120,
        },
        {
          title: '四维看看账号',
          ellipsis: true,
          dataIndex: 'userName',
          width: 120,
        },
        {
          title: '合同所属公司',
          dataIndex: 'companyName',
          ellipsis: true,
          width: 230,
        },
        {
          title: '业务部门',
          dataIndex: 'businessDept',
          ellipsis: true,
          width: 120,
        },
        {
          title: '业务员',
          dataIndex: 'businessName',
          ellipsis: true,
          width: 120,
        },
        {
          title: '客户名称',
          dataIndex: 'customerName',
          ellipsis: true,
          width: 100,
        },
        {
          title: '客户类别',
          dataIndex: 'customerType',
          ellipsis: true,
          width: 80,
          customRender: ({ record }) => {
            return record.customerType == 1 ? '经销' : record.customerType == 0 ? '直销' : '';
          },
        },
        {
          title: '终端客户',
          ellipsis: true,
          dataIndex: 'endCustomer',
          width: 120,
        },
        {
          title: '使用类型',
          ellipsis: true,
          dataIndex: 'useTypeStr',
          width: 120,
        },
        {
          title: '备注',
          ellipsis: true,
          dataIndex: 'remark',
          width: 120,
        },
        {
          title: '操作人',
          ellipsis: true,
          dataIndex: 'updaterName',
          width: 120,
        },
        {
          title: '操作时间',
          ellipsis: true,
          dataIndex: 'updateTime',
          width: 160,
        },
        {
          title: '状态',
          dataIndex: 'status',
          width: 80,
          customRender: ({ record }) => {
            if (!Reflect.has(record, 'pendingStatus')) {
              record.pendingStatus = false;
            }
            return h(Switch, {
              checked: record.status == '1',
              checkedChildren: '启用',
              unCheckedChildren: '禁用',
              loading: false,
              onChange: async (checked: boolean) => {
                record.pendingStatus = true;
                const newStatus = checked ? '1' : '0';
                await authorizeOpenApiupdate({ ...record, status: newStatus });
                if (checked) {
                  Reflect.set(record, 'status', newStatus);
                } else {
                  Reflect.set(record, 'status', newStatus);
                }
                // reload();
                createMessage.success(t('common.optSuccess'));
              },
            });
          },
        },
      ];
      const searchForm: Partial<FormProps> = {
        labelWidth: 100,
        autoSubmitOnEnter: true,
        schemas: [
          {
            field: 'apiKey',
            label: 'API KEY',
            component: 'Input',
            colProps: {
              xl: 8,
              xxl: 8,
            },
          },
          {
            field: 'userName',
            label: '四维看看账号',
            component: 'Input',
            colProps: {
              xl: 8,
              xxl: 8,
            },
          },
        ],
      };
      const [registerTable, { reload }] = useTable({
        api: authorizeOpenApilist,
        title: 'API授权列表',
        columns: columns,
        useSearchForm: true,
        formConfig: searchForm,
        showTableSetting: true,
        showIndexColumn: false,
        fetchSetting: {
          pageField: 'pageNum',
          sizeField: 'pageSize',
          listField: 'list',
          totalField: 'total',
        },
        actionColumn: {
          width: 150,
          title: '操作',
          dataIndex: 'action',
          slots: { customRender: 'action' },
        },
        rowKey: 'id',
        canResize: true,
      });
      async function handleDelete(record) {
        createConfirm({
          iconType: 'warning',
          title: () => h('span', '温馨提示'),
          content: () => h('span', '确定要删除授权吗？'),
          onOk: async () => {
            await authorizeOpenApidelete({ id: record.id });
            reload();
            createMessage.success(t('common.optSuccess'));
          },
        });
      }
      function handleEdit(record = {}) {
        openModal(true, record);
      }
      function handleDetail(record = {}) {
        opendetailModel(true, record);
      }
      function handleCopy(str: string) {
        copyTextToClipboard(str);
        createMessage.success('复制成功');
      }
      return {
        registerTable,
        handleCopy,
        handleDelete,
        reload,
        register,
        getCheckPerm,
        handleEdit,
        handleDetail,
      };
    },
  });
</script>