ProfitPanel.vue 3.63 KB
<template>
  <PageWrapper contentBackground>
    <BasicTable @register="registerTable">
      <template #form-custom> custom-slot </template>
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'action'">
          <TableAction
            :actions="[
              {
                label: '通过',
                // icon: 'ic:outline-delete-outline',
                onClick: handleTrue.bind(null, record),
              },
              {
                label: '拒绝',
                // icon: 'ic:outline-delete-outline',
                onClick: handleFalse.bind(null, record),
              },
            ]"
          />
        </template>
      </template>
    </BasicTable>
  </PageWrapper>
</template>
<script lang="ts">
  import { defineComponent, ref } from 'vue';
  import { BasicTable, useTable, TableAction } from '/@/components/Table';
  import { Tabs } from 'ant-design-vue';
  import { PageWrapper } from '/@/components/Page';

  import { approveAuditApi, getWaitListApi } from '/@/api/project/approve';

  export default defineComponent({
    components: {
      PageWrapper,
      BasicTable,
      TableAction,
      [Tabs.name]: Tabs,
      [Tabs.TabPane.name]: Tabs.TabPane,
    },
    setup() {
      const checkedKeys = ref<Array<string | number>>([]);
      const currentKey = ref('1');

      const [registerTable, { reload }] = useTable({
        api: getWaitListApi,
        searchInfo: { type: 10 },

        columns: [
          {
            title: '申请人',
            dataIndex: 'createBy',
            width: 150,
          },
          {
            title: '申请字段',
            dataIndex: 'fields',
            width: 600,
          },
          {
            title: '订单号',
            dataIndex: 'no6',
          },
          {
            title: '订单字段1',
            dataIndex: 'no5',
          },
          {
            title: '订单字段2',
            dataIndex: 'no4',
          },
          {
            title: '订单字段3',
            dataIndex: 'no3',
          },

          {
            title: '订单字段5',
            dataIndex: 'no1',
          },
        ],
        // useSearchForm: true,
        // formConfig: getFormConfig(),
        rowKey: 'id',
        actionColumn: {
          width: 160,
          title: 'Action',
          dataIndex: 'action',
          // slots: { customRender: 'action' },
        },
      });

      function onSelect(record, selected) {
        if (selected) {
          checkedKeys.value = [...checkedKeys.value, record.id];
        } else {
          checkedKeys.value = checkedKeys.value.filter((id) => id !== record.id);
        }
      }
      function onSelectAll(selected, selectedRows, changeRows) {
        const changeIds = changeRows.map((item) => item.id);
        if (selected) {
          checkedKeys.value = [...checkedKeys.value, ...changeIds];
        } else {
          checkedKeys.value = checkedKeys.value.filter((id) => {
            return !changeIds.includes(id);
          });
        }
      }
      function handleEdit(record, e) {
        e?.stopPropagation();
        return false;
      }

      function handleProfitModal() {}

      async function handleTrue(record) {
        await approveAuditApi({ status: 10, id: record.id });
        reload();
      }

      async function handleFalse(record) {
        await approveAuditApi({ status: 20, id: record.id });
        reload();
      }

      return {
        handleProfitModal,
        registerTable,
        checkedKeys,
        currentKey,
        onSelect,
        handleEdit,
        onSelectAll,
        handleTrue,
        handleFalse,
      };
    },
  });
</script>