4dkk_mp/src/views/product/sdk/index.vue

<template>
  <PageWrapper contentBackground>
    <template #footer>
      <a-tabs v-model:activeKey="searchInfo.type" @change="tabChange">
        <a-tab-pane key="1" :tab="t('routes.product.sdkType.1')" />
        <a-tab-pane key="2" :tab="t('routes.product.sdkType.2')" />
      </a-tabs>
    </template>
    <div class="desc-wrap-BasicTable">
      <BasicTable @register="registerTimeTable">
        <template #toolbar>
          <a-button
            type="primary"
            v-if="getTypeCheckPerm('sdk-add')"
            @click="
              () => {
                openAddModal(true, searchInfo.type);
              }
            "
            >{{ t('routes.product.addVstive') }}</a-button
          >
        </template>
        <template #action="{ record }">
          <TableAction
            :actions="[
              {
                label: '编辑',
                icon: 'ep:edit',
                ifShow: getTypeCheckPerm('sdk-update'),
                onClick: handleEdit.bind(null, record),
              },
              {
                label: '下架',
                ifShow: getTypeCheckPerm('sdk-update') && record.status == 1,
                icon: 'akar-icons:statistic-down',
                onClick: handleOff.bind(null, record),
              },
              {
                label: '删除',
                ifShow: getTypeCheckPerm('sdk-delete'),
                icon: 'ic:outline-delete-outline',
                popConfirm: {
                  title: '是否确认删除',
                  confirm: handleDelete.bind(null, record),
                },
              },
            ]"
          />
        </template>
      </BasicTable>
    </div>
    <AddModal @update="reload" @register="registerAddModal" />
    <EditModal @register="registerEditModal" @update="reload" />
  </PageWrapper>
</template>
<script lang="ts">
import { defineComponent, reactive, h } from 'vue';
import { Time } from '/@/components/Time';
import { BasicTable, useTable, FormProps, TableAction, BasicColumn } from '/@/components/Table';
import { PageWrapper } from '/@/components/Page';
import { Divider, Card, Empty, Descriptions, Steps, Tabs,Switch } from 'ant-design-vue';
import { SpaceSdkList, SpaceSdkDelete, SpaceSdkOnline } from '/@/api/product';
import { SpaceSdkTop } from '/@/api/product/index';
import { useModal } from '/@/components/Modal';
import { useI18n } from '/@/hooks/web/useI18n';
import AddModal from './AddModal.vue';
import EditModal from './EditModal.vue';
import { useMessage } from '/@/hooks/web/useMessage';
import { usePermissionStore } from '/@/store/modules/permission';
export default defineComponent({
  components: {
    BasicTable,
    AddModal,
    EditModal,
    TableAction,
    PageWrapper,
    [Divider.name]: Divider,
    [Card.name]: Card,
    Empty,
    [Descriptions.name]: Descriptions,
    [Descriptions.Item.name]: Descriptions.Item,
    [Steps.name]: Steps,
    [Steps.Step.name]: Steps.Step,
    [Tabs.name]: Tabs,
    [Tabs.TabPane.name]: Tabs.TabPane,
  },
  setup() {
    const { t } = useI18n();
    const permissionStore = usePermissionStore();
    const { getCheckPerm } = permissionStore;
    const searchInfo = reactive<Recordable>({
      type: '1',
    });
    const [registerAddModal, { openModal: openAddModal }] = useModal();
    const [registerEditModal, { openModal: openEditModal }] = useModal();
    const { createMessage } = useMessage();
    const searchForm: Partial<FormProps> = {
      labelWidth: 100,
      schemas: [
        {
          field: 'version',
          label: '版本号',
          component: 'Input',
          componentProps: {
            maxLength: 100,
          },
          colProps: {
            xl: 6,
            xxl: 6,
          },
        },
      ],
    };
    const sdkTableSchema: BasicColumn[] = [
      {
        title: '版本号',
        width: 80,
        dataIndex: 'version',
      },
      {
        title: '版本更新说明',
        width: 240,
        dataIndex: 'imprintCh',
      },
      {
        title: '版本更新说明',
        width: 150,
        ifShow:true,
        dataIndex: 'status',
      },
      {
        title: '首次发布时间',
        width: 120,
        dataIndex: 'publishTime',
        customRender: ({ record }) => {
          return (
            record.publishTime &&
            h(Time, {
              value: record.publishTime,
              mode: 'datetime',
            })
          );
        },
      },{
        title: '创建人',
        width: 80,
        dataIndex: 'recStatus',
      },{
        title: '创建时间',
        width: 120,
        dataIndex: 'createTime',
        customRender: ({ record }) => {
          return (
            record.createTime &&
            h(Time, {
              value: record.createTime,
              mode: 'datetime',
            })
          );
        },
      },{
        title: '置顶',
        dataIndex: 'isTop',
        ifShow: getCheckPerm('sdk-top'),
        width: 80,
        customRender: ({ record }) => {
          if (!Reflect.has(record, 'isTop')) {
            record.pendingStatus = false;
          }
          return h(Switch, {
            checked: record.isTop == 1 ? true : false,
            checkedChildren: '启用',
            unCheckedChildren: '禁用',
            loading: false,
            onChange: async (checked: boolean) => {
              record.pendingStatus = true;
              const newStatus = checked?1:0;
              await SpaceSdkTop({...record,isTop:newStatus});
              Reflect.set(record, 'isTop', checked);
              createMessage.success(t('common.optSuccess'));
              reload()
            },
          });
        },
      },{
        title: '发布状态',
        dataIndex: 'status',
        width: 80,
        customRender: ({ record }) => {
          return renderType(record.status)
        },
      },
    ];
    const [registerTimeTable, { reload }] = useTable({
      api: SpaceSdkList,
      title: 'SDK列表',
      columns: sdkTableSchema,
      useSearchForm: true,
      formConfig: searchForm,
      showTableSetting: true,
      showIndexColumn:false,
      rowKey: 'id',
      fetchSetting: {
        pageField: 'pageNum',
        sizeField: 'pageSize',
        listField: 'list',
        totalField: 'total',
      },
      searchInfo: searchInfo,
      actionColumn: {
        width: 200,
        title: '操作',
        dataIndex: 'action',
        slots: { customRender: 'action' },
      },
      canResize: false,
    });
    function tabChange(val: string) {
      console.log('tabChange', val);
      reload();
    }
    function renderType(type: number): string {
      switch (type) {
        case 0:
          return t(`routes.product.statusType.0`);
        case 1:
          return t(`routes.product.statusType.1`);
        default:
          return t(`routes.product.statusType.1`);
      }
    }
    async function handleDelete(record: Recordable) {
      console.log('点击了删除', record);
      await SpaceSdkDelete({ id: record.id });
      createMessage.success(t('common.optSuccess'));
      reload();
    }
    function handleOpen(record: Recordable) {
      console.log('点击了启用', record);
    }
    async function handleOff(record: Recordable) {
      await SpaceSdkOnline({ id: record.id, status:2 });//状态 0 - 未发布 1 -发布  2-下架
      createMessage.success(t('common.optSuccess'));
      reload();
    }
    function handleEdit(record: Recordable) {
      console.log('record', record);
      openEditModal(true, {
        ...record,
      });
    }
    
    function getTypeCheckPerm(val){
        let myType = searchInfo.type
        return getCheckPerm(val) || getCheckPerm(`${val}-${myType}`)
      }
    return {
      registerTimeTable,
      handleDelete,
      handleOpen,
      tabChange,
      handleOff,
      reload,
      registerAddModal,
      registerEditModal,
      openAddModal,
      handleEdit,
      getTypeCheckPerm,
      t,
      searchInfo,
    };
  },
});
</script>
<style lang="less" scoped>
.desc-wrap-BasicTable {
  background-color: #f0f2f5;
  .vben-basic-table-form-container {
    padding: 0;
  }
}
</style>