|
|
@@ -1,5 +1,202 @@
|
|
|
<template>
|
|
|
- <div>
|
|
|
- 考勤管理
|
|
|
+ <div class="h-full overflow-hidden">
|
|
|
+ <n-card title="考勤管理" :bordered="false" class="rounded-16px shadow-sm">
|
|
|
+ <n-space class="pb-12px" justify="space-between">
|
|
|
+ <n-space>
|
|
|
+ <n-button type="primary" @click="handleAddTable">
|
|
|
+ <icon-ic-round-plus class="mr-4px text-20px" />
|
|
|
+ 新增
|
|
|
+ </n-button>
|
|
|
+ <n-button type="error" @click="deleteSubjectsList">
|
|
|
+ <icon-ic-round-delete class="mr-4px text-20px" />
|
|
|
+ 删除
|
|
|
+ </n-button>
|
|
|
+ <n-input-group>
|
|
|
+ <n-input :style="{ width: '50%' }" placeholder="输入序号查询..." />
|
|
|
+ <n-input :style="{ width: '50%' }" placeholder="输入姓名查询..." />
|
|
|
+ <n-cascader v-model:value="value" placeholder="是否签到" :options="options" :filterable="true"
|
|
|
+ :render-label="renderLabel" @update:value="handleUpdateValue" />
|
|
|
+ <n-button type="primary" ghost @click="serchCondition()">
|
|
|
+ 搜索
|
|
|
+ </n-button>
|
|
|
+ </n-input-group>
|
|
|
+ </n-space>
|
|
|
+ </n-space>
|
|
|
+ <n-scrollbar style="max-height: 100vh" trigger="none">
|
|
|
+ <n-data-table :row-key="row => row.id" :columns="columns" :data="pageDate" :loading="loading"
|
|
|
+ :pagination="pagination" />
|
|
|
+ <!-- <n-pagination v-model:page="page" :page-count="100" simple /> -->
|
|
|
+
|
|
|
+ <!-- <table-action-modal @init="init" v-model:visible="visible" @update:checked-row-keys="handleCheck"
|
|
|
+ :type="modalType" :pagination="pagination" :edit-data="(editData as SelectByConditionParams)" /> -->
|
|
|
+ <div style="width: 100%; height: 300px;"></div>
|
|
|
+ </n-scrollbar>
|
|
|
+
|
|
|
+ </n-card>
|
|
|
+
|
|
|
</div>
|
|
|
</template>
|
|
|
+
|
|
|
+<script setup lang="tsx">
|
|
|
+import { useBoolean, useLoading } from '@/hooks';
|
|
|
+import type { Ref } from 'vue';
|
|
|
+import { reactive, ref } from 'vue';
|
|
|
+import type { SelectByConditionParams } from '~/src/service/api/crouse'
|
|
|
+import { PaginationProps, DataTableColumns, DataTableRowKey, NButton, NPopconfirm, NSpace } from 'naive-ui';
|
|
|
+import { CascaderOption } from 'naive-ui'
|
|
|
+
|
|
|
+function getOptions(depth = 3, iterator = 1, prefix = '') {
|
|
|
+ const length = 2;
|
|
|
+ const options: CascaderOption[] = []
|
|
|
+ for (let i = 1; i <= length; ++i) {
|
|
|
+ if (iterator === 1) {
|
|
|
+ options.push({
|
|
|
+ value: `v-${i}`,
|
|
|
+ label: '未签到',
|
|
|
+ disabled: i % 5 === 0,
|
|
|
+ children: getOptions(depth, iterator + 1, '' + String(i))
|
|
|
+ });
|
|
|
+ if (options[0].value === 'v-1') {
|
|
|
+ options[0].label = '已签到'
|
|
|
+ }
|
|
|
+ console.log(options, 'd11111')
|
|
|
+
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ // if()
|
|
|
+ if (prefix === '1') {
|
|
|
+ options.splice(0)
|
|
|
+ // options[i].disabled = true;
|
|
|
+ } else {
|
|
|
+ options.splice(0)
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ console.log(options, 'hduasi')
|
|
|
+ options.push({
|
|
|
+ value: `v-${prefix}-1`,
|
|
|
+ label: `早退`,
|
|
|
+ disabled: i % 5 === 0
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: `v-${prefix}-2`,
|
|
|
+ label: `迟到`,
|
|
|
+ disabled: i % 5 === 0
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: `v-${prefix}-3`,
|
|
|
+ label: `请假`,
|
|
|
+ disabled: i % 5 === 0
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: `v-${prefix}-4`,
|
|
|
+ label: `无效`,
|
|
|
+ disabled: i % 5 === 0
|
|
|
+ })
|
|
|
+ console.log(options, '8888888')
|
|
|
+ if (prefix === '1') {
|
|
|
+ for (let i = 0; i < options.length; i++) {
|
|
|
+ options[i].disabled = true;
|
|
|
+ }
|
|
|
+ // options[i].disabled = true;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return options
|
|
|
+}
|
|
|
+const value = ref(null);
|
|
|
+const options = getOptions();
|
|
|
+function handleUpdateValue(...args: unknown[]) {
|
|
|
+ console.log(...args)
|
|
|
+};
|
|
|
+function renderLabel(option: { value?: string | number; label?: string }) {
|
|
|
+ return `${option.label}`
|
|
|
+};
|
|
|
+
|
|
|
+const { loading } = useLoading(false);
|
|
|
+// const { bool: visible, setTrue: openModal } = useBoolean();
|
|
|
+
|
|
|
+const pagination: PaginationProps = reactive({
|
|
|
+ page: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ showSizePicker: true,
|
|
|
+ showQuickJumper: true,
|
|
|
+ pageSizes: [10, 15, 20, 25, 30],
|
|
|
+ onUpdatePageSize: (pageSize: number) => {
|
|
|
+ pagination.pageSize = pageSize;
|
|
|
+ // serchCondition();
|
|
|
+ },
|
|
|
+ onUpdatePage: (page: number) => {
|
|
|
+ pagination.page = page;
|
|
|
+ // serchCondition();
|
|
|
+ }
|
|
|
+});
|
|
|
+const columns: Ref<DataTableColumns<SelectByConditionParams>> = ref([
|
|
|
+ {
|
|
|
+ type: 'selection',
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: 'id',
|
|
|
+ title: '序号',
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: 'name',
|
|
|
+ title: '姓名',
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: 'description',
|
|
|
+ title: '是否签到',
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: 'categoryId',
|
|
|
+ title: '正常',
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: 'createTime',
|
|
|
+ title: '迟到',
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: 'modifyTime',
|
|
|
+ title: '早退',
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: 'createUid',
|
|
|
+ title: '请假',
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: 'disabled',
|
|
|
+ title: '无效',
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: 'actions',
|
|
|
+ title: '操作',
|
|
|
+ align: 'center',
|
|
|
+ render: row => {
|
|
|
+ return (
|
|
|
+ <NSpace justify={'center'}>
|
|
|
+ <NButton size={'small'} onClick={() => handleEditTable(row)}>
|
|
|
+ 编辑
|
|
|
+ </NButton>
|
|
|
+ <NPopconfirm onPositiveClick={() => handleDeleteTable(row.id.toString())}>
|
|
|
+ {{
|
|
|
+ default: () => '确认删除',
|
|
|
+ trigger: () => <NButton size={'small'}>删除</NButton>
|
|
|
+ }}
|
|
|
+ </NPopconfirm>
|
|
|
+ </NSpace>
|
|
|
+ );
|
|
|
+ }
|
|
|
+ }
|
|
|
+]) as Ref<DataTableColumns<SelectByConditionParams>>;
|
|
|
+</script>
|
|
|
+<style></style>
|
liuxinyang