smart-steward-admin/apps/web-ele/src/views/schedule/work/class/index.vue

<script setup lang="ts">
import { onMounted, watch } from 'vue';
import { Page } from '@vben/common-ui';
import { useRouter } from 'vue-router';
import { useVbenVxeGrid, type VxeGridProps } from '#/adapter/vxe-table';
import { columns, querySchema } from './config-data';
// @ts-ignore
import type { VbenFormProps } from '@vben/common-ui';
import {
  queryrclassApilist,
  queryscheduleClassOpeningApi,
} from '#/api/schedule/work/class';
import { ElMessage } from 'element-plus';
const router = useRouter();
const mockData = [
  {
    roleId: 2,
    Name: '王保瑞',
    Position: '当班经理',
    roleSort: 1,
    status: '0',
    Startdate: '2024-01-15 10:00:00',
    remark: '当班',
    isEditing: false,
  },
  {
    roleId: 2,
    Name: '王凯',
    Position: '当班经理',
    roleSort: 1,
    status: '0',
    createTime: '2024-01-15 10:00:00',
    remark: '当班',
    isEditing: false,
  },
  {
    roleId: 2,
    Name: '威威',
    Position: '当班经理',
    roleSort: 1,
    status: '0',
    createTime: '2024-01-15 10:00:00',
    remark: '当班',
    isEditing: false,
  },
  // {
  //   roleId: 3,
  //   Name: '普通用户',
  //   roleKey: 'user',
  //   roleSort: 2,
  //   status: '0',
  //   createTime: '2024-01-16 12:00:00',
  //   remark: '测试用户',
  // },
];
const formOptions: VbenFormProps = {
  commonConfig: {
    labelWidth: 80,
    componentProps: {
      allowClear: true,
    },
  },
  schema: querySchema(),
  wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
  // 日期选择格式化
  fieldMappingTime: [
    [
      'createTime',
      ['params[beginTime]', 'params[endTime]'],
      ['YYYY-MM-DD 00:00:00', 'YYYY-MM-DD 23:59:59'],
    ],
  ],
};
onMounted(() => {
  console.log(router);
});
// 列表中显示配置
const gridOptions: VxeGridProps = {
  checkboxConfig: {
    // 高亮
    highlight: true,
    // 翻页时保留选中状态
    reserve: true,
    // 点击行选中
    trigger: 'default',
    checkMethod: ({ row }) => row?.roleId !== 1,
  },
  columns,
  size: 'medium',
  height: 'auto',
  // data: mockData,
  proxyConfig: {
    ajax: {
      query: async ({ page }, formValues = {}) => {
        const resp = await queryrclassApilist({
          ...formValues,
          pageNum: page.currentPage,
          pageSize: page.pageSize,
        });
        return { items: resp.rows, total: resp.total };
      },
    },
  },
  rowConfig: {
    keyField: 'roleId',
  },
  toolbarConfig: {
    custom: true,
    refresh: true,
    zoom: true,
  },
  id: 'system-role-index',
};
const [BasicTable, BasicTableApi] = useVbenVxeGrid({
  formOptions,
  gridOptions,
});
// 定义新增抽屉
const handleAddClick = async () => {
  const formValues = (await BasicTableApi.formApi?.getValues()) || {};
  if (!formValues?.stationName) {
    ElMessage.warning('请先选择场站');
    return;
  }
  router.replace({
    path: '/schedule/work/class/addandedit',
    query: {
      stationId: formValues?.stationName,
    },
  });
};
const handleViewClick = (data: any) => {
  router.push({
    path: '/schedule/work/class/addandedit',
    query: {
      stationId: data.stationId,
      Detailsid: data.id,
    },
  });
};

// const handleEditClick = (row: any) => {
//   console.log(row);
// };

watch(
  () => router.currentRoute.value.path,
  (newPath, oldPath) => {
    if (newPath === '/schedule/work/class' && oldPath === '/schedule/work/class/addandedit') {
      BasicTableApi.reload();
    }
  }
);
</script>
<template>
  <Page :auto-content-height="true">
    <BasicTable table-title="如每月8日后需调整上月数据，请联系系统管理员">
      <template #toolbar-tools>
        <el-space>
          <el-button type="primary" @click="handleAddClick"> 开班 </el-button>
        </el-space>
      </template>
      <template #action="{ row }">
        <el-button
          size="small"
          type="primary"
          plain
          @click="handleViewClick(row)"
          >查看</el-button
        >
        <!-- <el-button
          size="small"
          type="primary"
          plain
          @click="handleEditClick(row)"
          >编辑</el-button
        > -->
      </template>
    </BasicTable>
  </Page>
</template>
<style scoped lang="scss">
:deep(.el-tooltip__trigger:focus) {
  outline: none;
}
</style>