|
@@ -13,87 +13,89 @@
|
|
</n-button>
|
|
</n-button>
|
|
<n-input-group>
|
|
<n-input-group>
|
|
|
|
|
|
- <n-input :style="{ width: '50%' }" @keyup="serchForm" @change="handleChange" placeholder="输入id查询..." />
|
|
|
|
- <n-button type="primary" ghost @click="serchForm()">
|
|
|
|
- 搜索
|
|
|
|
- </n-button>
|
|
|
|
- </n-input-group>
|
|
|
|
- <n-input-group>
|
|
|
|
- <n-input-number :style="{ width: '33%' }" @input="handleInput1" />
|
|
|
|
- <n-input-number :style="{ width: '33%' }" @input="handleInput2" />
|
|
|
|
- <n-button type="primary" @click="serchCondition()">
|
|
|
|
|
|
+
|
|
|
|
+ <n-input :style="{ width: '50%' }" :value="conditionParams.id" @input="event=>conditionParams.id = event" placeholder="输入查询..." />
|
|
|
|
+ <n-input :style="{ width: '50%' }" :value="conditionParams.name" @input="event=>conditionParams.name = event" placeholder="输入查询..." />
|
|
|
|
+ <n-input :style="{ width: '50%' }" :value="conditionParams.description" @input="event=>conditionParams.description = event" placeholder="输入查询..." />
|
|
|
|
+ <n-input :style="{ width: '50%' }" :value="conditionParams.disabled" @input="event=>conditionParams.disabled = event" placeholder="输入查询..." />
|
|
|
|
+ <n-input :style="{ width: '50%' }" :value="conditionParams.createTime" @input="event=>conditionParams.createTime = event" placeholder="输入查询..." />
|
|
|
|
+ <n-input :style="{ width: '50%' }" :value="conditionParams.categoryId" @input="event=>conditionParams.categoryId = event" placeholder="输入查询..." />
|
|
|
|
+ <n-button type="primary" ghost @click="serchCondition()">
|
|
搜索
|
|
搜索
|
|
</n-button>
|
|
</n-button>
|
|
</n-input-group>
|
|
</n-input-group>
|
|
</n-space>
|
|
</n-space>
|
|
</n-space>
|
|
</n-space>
|
|
- <n-data-table v-if="serchFormEr.length > 0 && inputValue !== 0" :columns="columns" :data="serchFormEr"
|
|
|
|
- :loading="loading" :pagination="pagination" :row-key="rowKey" @update:checked-row-keys="handleCheck" />
|
|
|
|
- <n-data-table v-if="serchFormEr.length <= 0 || inputValue === 0" :columns="columns" :data="pageDate"
|
|
|
|
- :loading="loading" :pagination="pagination" :row-key="rowKey" @update:checked-row-keys="handleCheck" />
|
|
|
|
- <table-action-modal v-model:visible="visible" :type="modalType" :edit-data="editData" />
|
|
|
|
|
|
+ <n-scrollbar style="max-height: 100vh" trigger="none">
|
|
|
|
+ <n-data-table :columns="columns" :data="pageDate" :loading="loading" :row-key="rowKey" :pagination="pagination" />
|
|
|
|
+ <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>
|
|
</n-card>
|
|
|
|
+
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
-<script lang="tsx">
|
|
|
|
-import { reactive, ref, defineComponent } from 'vue';
|
|
|
|
|
|
+<script setup lang="tsx">
|
|
|
|
+import { reactive, ref } from 'vue';
|
|
import type { Ref } from 'vue';
|
|
import type { Ref } from 'vue';
|
|
import { useBoolean, useLoading } from '@/hooks';
|
|
import { useBoolean, useLoading } from '@/hooks';
|
|
import TableActionModal from './component/table-action-modal.vue';
|
|
import TableActionModal from './component/table-action-modal.vue';
|
|
import type { ModalType } from './component/table-action-modal.vue';
|
|
import type { ModalType } from './component/table-action-modal.vue';
|
|
-import { selectAll, deleteSubjects, selectById, selectByCondition } from '~/src/service/api/crouse';
|
|
|
|
|
|
+import { deleteSubjects, selectByCondition } from '~/src/service/api/crouse';
|
|
import type { SelectByConditionParams } from '~/src/service/api/crouse'
|
|
import type { SelectByConditionParams } from '~/src/service/api/crouse'
|
|
import { PaginationProps, DataTableColumns, DataTableRowKey, NButton, NPopconfirm, NSpace } from 'naive-ui';
|
|
import { PaginationProps, DataTableColumns, DataTableRowKey, NButton, NPopconfirm, NSpace } from 'naive-ui';
|
|
-import { fetchUserList } from '@/service';
|
|
|
|
-import { number } from 'echarts';
|
|
|
|
|
|
|
|
-// import { selectByCondition } from '../../../service/api/crouse.ts';
|
|
|
|
-// import AddView from '~/src/views/management/crouse/component/AddView.vue';
|
|
|
|
-// const useSelect: SelectByConditionParams = {};
|
|
|
|
-// const { loading } = useLoading(false);
|
|
|
|
-const conditionParams: SelectByConditionParams = {};
|
|
|
|
-const { loading, startLoading, endLoading } = useLoading(false);
|
|
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+const conditionParams:SelectByConditionParams = reactive({
|
|
|
|
+ id: null,
|
|
|
|
+ name: null,
|
|
|
|
+ description: null,
|
|
|
|
+ categoryId: null,
|
|
|
|
+ createTime: null,
|
|
|
|
+ modifyTime: null,
|
|
|
|
+ disabled: null
|
|
|
|
+});
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+// 输入值
|
|
|
|
+const form = ref('');
|
|
|
|
+console.log(form)
|
|
|
|
+const { loading } = useLoading(false);
|
|
const { bool: visible, setTrue: openModal } = useBoolean();
|
|
const { bool: visible, setTrue: openModal } = useBoolean();
|
|
-// input的值
|
|
|
|
-const inputValue = ref(0);
|
|
|
|
-// 接收查询返回的数组
|
|
|
|
-const serchInput = ref([]) as any;
|
|
|
|
-const serchFormEr = ref([]);
|
|
|
|
-// 根据条件查询
|
|
|
|
-const inputPageNum1 = ref(0);
|
|
|
|
-const inputPageNum2 = ref(0);
|
|
|
|
-console.log(inputValue.value)
|
|
|
|
|
|
+
|
|
const pagination: PaginationProps = reactive({
|
|
const pagination: PaginationProps = reactive({
|
|
- page: 1 || number,
|
|
|
|
- pageSize: 10 || number,
|
|
|
|
|
|
+ page: 1,
|
|
|
|
+ pageSize: 10,
|
|
showSizePicker: true,
|
|
showSizePicker: true,
|
|
- pageSizes: [10, 15, 20, 25, 30] || number,
|
|
|
|
- // onChange: (page: number) => {
|
|
|
|
- // pagination.page = page;
|
|
|
|
- // },
|
|
|
|
|
|
+ pageCount: 12,
|
|
|
|
+ pageSizes: [10, 15, 20, 25, 30],
|
|
onUpdatePageSize: (pageSize: number) => {
|
|
onUpdatePageSize: (pageSize: number) => {
|
|
pagination.pageSize = pageSize;
|
|
pagination.pageSize = pageSize;
|
|
},
|
|
},
|
|
- onUpdatePage: (page: number) =>{
|
|
|
|
|
|
+ onUpdatePage: (page: number) => {
|
|
pagination.page = page;
|
|
pagination.page = page;
|
|
}
|
|
}
|
|
});
|
|
});
|
|
-
|
|
|
|
-const pageDate = ref([]);
|
|
|
|
|
|
+console.log(pagination.page, pagination.pageSize)
|
|
type RowData = {
|
|
type RowData = {
|
|
- key: number;
|
|
|
|
- id: number;
|
|
|
|
- select: string;
|
|
|
|
- name: string;
|
|
|
|
- description: string;
|
|
|
|
- categoryId: string;
|
|
|
|
- createTime: string;
|
|
|
|
- modifyTime: string;
|
|
|
|
- createUid: number;
|
|
|
|
- disabled: string;
|
|
|
|
-};
|
|
|
|
-const columns: Ref<DataTableColumns<UserManagement1.User>> = ref([
|
|
|
|
|
|
+ key: number
|
|
|
|
+ id: number
|
|
|
|
+ name: string
|
|
|
|
+ description: string
|
|
|
|
+ createTime: string
|
|
|
|
+ modifyTime: string
|
|
|
|
+ createUid: number
|
|
|
|
+ disabled: string
|
|
|
|
+}
|
|
|
|
+const rowKey = (row: RowData) => row.id
|
|
|
|
+const checkedRowKeysRef = ref<DataTableRowKey[]>([]);
|
|
|
|
+const pageDate = ref([]);
|
|
|
|
+
|
|
|
|
+const columns: Ref<DataTableColumns<SelectByConditionParams>> = ref([
|
|
{
|
|
{
|
|
type: 'selection',
|
|
type: 'selection',
|
|
align: 'center'
|
|
align: 'center'
|
|
@@ -143,16 +145,12 @@ const columns: Ref<DataTableColumns<UserManagement1.User>> = ref([
|
|
title: '操作',
|
|
title: '操作',
|
|
align: 'center',
|
|
align: 'center',
|
|
render: row => {
|
|
render: row => {
|
|
- function handleDeleteTable(value: never[]): any {
|
|
|
|
- throw new Error('Function not implemented.');
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
return (
|
|
return (
|
|
<NSpace justify={'center'}>
|
|
<NSpace justify={'center'}>
|
|
- <NButton size={'small'} onClick={() => handleEditTable(row.id)}>
|
|
|
|
|
|
+ <NButton size={'small'} onClick={() => handleEditTable(row)}>
|
|
编辑
|
|
编辑
|
|
</NButton>
|
|
</NButton>
|
|
- <NPopconfirm onPositiveClick={() => handleDeleteTable(pageDate.value)}>
|
|
|
|
|
|
+ <NPopconfirm onPositiveClick={() => handleDeleteTable(row.id.toString())}>
|
|
{{
|
|
{{
|
|
default: () => '确认删除',
|
|
default: () => '确认删除',
|
|
trigger: () => <NButton size={'small'}>删除</NButton>
|
|
trigger: () => <NButton size={'small'}>删除</NButton>
|
|
@@ -162,58 +160,22 @@ const columns: Ref<DataTableColumns<UserManagement1.User>> = ref([
|
|
);
|
|
);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
-]) as Ref<DataTableColumns<UserManagement1.User>>;
|
|
|
|
-// selectByCondition(pagination.page, pagination.pageSize, useSelect).then(r => {
|
|
|
|
-// console.log(r);
|
|
|
|
-// });
|
|
|
|
-// eslint-disable-next-line import/no-duplicates
|
|
|
|
-// import { selectAll } from '../../../service/api/crouse.ts';
|
|
|
|
-// selectAll().then(r => {
|
|
|
|
-// console.log(r);
|
|
|
|
-// });
|
|
|
|
-// const useAdd: AddSubjectParams = {
|
|
|
|
-// id: 2,
|
|
|
|
-// name: '物理',
|
|
|
|
-// description: '很难',
|
|
|
|
-// categoryId: '理学',
|
|
|
|
-// createTime: '',
|
|
|
|
-// modifyTime: '',
|
|
|
|
-// createUid: 2,
|
|
|
|
-// disabled: '1'
|
|
|
|
-// } as any;
|
|
|
|
-// 重新加载
|
|
|
|
-// function handleRefresh() {
|
|
|
|
-// const isCached = routeStore.cacheRoutes.includes(String(route.name));
|
|
|
|
-// if (isCached) {
|
|
|
|
-// routeStore.removeCacheRoute(route.name as AuthRoute.AllRouteKey);
|
|
|
|
-// }
|
|
|
|
-// startLoading();
|
|
|
|
-// app.reloadPage();
|
|
|
|
-// setTimeout(() => {
|
|
|
|
-// if (isCached) {
|
|
|
|
-// routeStore.addCacheRoute(route.name as AuthRoute.AllRouteKey);
|
|
|
|
-// }
|
|
|
|
-// endLoading();
|
|
|
|
-// }, 1000);
|
|
|
|
-// }
|
|
|
|
|
|
+]) as Ref<DataTableColumns<SelectByConditionParams>>;
|
|
|
|
+
|
|
|
|
+
|
|
function handleAddTable() {
|
|
function handleAddTable() {
|
|
openModal();
|
|
openModal();
|
|
setModalType('add');
|
|
setModalType('add');
|
|
init();
|
|
init();
|
|
}
|
|
}
|
|
|
|
+
|
|
|
|
+
|
|
// 编辑
|
|
// 编辑
|
|
-const editData = ref<UserManagement1.User | null>(null);
|
|
|
|
-function setEditData(data: UserManagement1.User | null) {
|
|
|
|
|
|
+const editData = ref<SelectByConditionParams | null>(null);
|
|
|
|
+function setEditData(data: SelectByConditionParams | null) {
|
|
editData.value = data;
|
|
editData.value = data;
|
|
- console.log(editData.value)
|
|
|
|
}
|
|
}
|
|
-function handleEditTable(rowId: number) {
|
|
|
|
- console.log(rowId)
|
|
|
|
- // selectAll().then(r => {
|
|
|
|
- // pageDate.value = r.data as [];
|
|
|
|
- // });
|
|
|
|
- const findItem = pageDate.value.find(item => item.id === rowId);
|
|
|
|
- console.log(findItem, pageDate.value)
|
|
|
|
|
|
+function handleEditTable(findItem: SelectByConditionParams) {
|
|
if (findItem) {
|
|
if (findItem) {
|
|
setEditData(findItem);
|
|
setEditData(findItem);
|
|
}
|
|
}
|
|
@@ -221,157 +183,41 @@ function handleEditTable(rowId: number) {
|
|
openModal();
|
|
openModal();
|
|
}
|
|
}
|
|
|
|
|
|
|
|
+function handleDeleteTable(rowId: string) {
|
|
|
|
+ const rowIdNumber = Number(rowId);
|
|
|
|
+ deleteSubjects(rowIdNumber);
|
|
|
|
+ init();
|
|
|
|
+}
|
|
|
|
+
|
|
const modalType = ref<ModalType>('add' || 'edit');
|
|
const modalType = ref<ModalType>('add' || 'edit');
|
|
function setModalType(type: ModalType) {
|
|
function setModalType(type: ModalType) {
|
|
modalType.value = type;
|
|
modalType.value = type;
|
|
- console.log(modalType.value)
|
|
|
|
}
|
|
}
|
|
-
|
|
|
|
-selectAll().then(r => {
|
|
|
|
- console.log(r)
|
|
|
|
- pageDate.value = r.data as [];
|
|
|
|
-});
|
|
|
|
-// addSubject(useAdd).then(() => {
|
|
|
|
-// selectAll();
|
|
|
|
-// });
|
|
|
|
-// const tableData = ref<RowData[]>([]);
|
|
|
|
-// function setTableData(data: RowData[]) {
|
|
|
|
-// tableData.value = data;
|
|
|
|
-// }
|
|
|
|
-// 删除
|
|
|
|
const s = ref([]) as any;
|
|
const s = ref([]) as any;
|
|
-const d = ref([]) as any
|
|
|
|
-function deleteSubjectsList() {
|
|
|
|
- if (s.value.length !== 0) {
|
|
|
|
- for (let i = 0; i < s.value.length; i++) {
|
|
|
|
- deleteSubjects(s.value[i]).then((r) => {
|
|
|
|
- // handleRefresh();
|
|
|
|
- console.log(r)
|
|
|
|
- console.log(s.value.length)
|
|
|
|
- d.value.id = s.value[i].id
|
|
|
|
- // for(let j = 0;j<d.value.length;j++){
|
|
|
|
- // if(d.value[j].id === s.value[j].id){
|
|
|
|
- // s.value.length = 0
|
|
|
|
- // }
|
|
|
|
- // }
|
|
|
|
- console.log(s.value[i].id)
|
|
|
|
- });
|
|
|
|
- }
|
|
|
|
|
|
|
|
|
|
+function deleteSubjectsList() {
|
|
|
|
+ const difference = checkedRowKeysRef.value.filter(item => !s.value.includes(item));
|
|
|
|
+ s.value = checkedRowKeysRef.value
|
|
|
|
+ for (let i = 0; i < difference.length; i++) {
|
|
|
|
+ deleteSubjects(Number(difference[i]));
|
|
}
|
|
}
|
|
- s.value = [];
|
|
|
|
- console.log(s.value.length)
|
|
|
|
- if (s.value.length == 0) {
|
|
|
|
- console.log(s.value.length)
|
|
|
|
- window.$message?.success('删除成功!');
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
-
|
|
|
|
init();
|
|
init();
|
|
}
|
|
}
|
|
-// function handleDeleteTable(rowId) {
|
|
|
|
-// window.$message?.info(`点击了删除,rowId为${rowId}`);
|
|
|
|
-// }
|
|
|
|
-
|
|
|
|
-async function getTableData() {
|
|
|
|
- startLoading();
|
|
|
|
- const { data } = await fetchUserList();
|
|
|
|
- if (data) {
|
|
|
|
- setTimeout(() => {
|
|
|
|
- // setTableData(data);
|
|
|
|
- selectAll().then((r) => [
|
|
|
|
- pageDate.value = r.data as []
|
|
|
|
- ]);
|
|
|
|
- endLoading();
|
|
|
|
- }, 1000);
|
|
|
|
- }
|
|
|
|
|
|
+function handleCheck(rowKeys: DataTableRowKey[]) {
|
|
|
|
+ checkedRowKeysRef.value = rowKeys;
|
|
}
|
|
}
|
|
-
|
|
|
|
-// deleteSubjects(r: RowData)
|
|
|
|
-export default defineComponent({
|
|
|
|
- components: { TableActionModal },
|
|
|
|
- setup() {
|
|
|
|
- // console.log(pageDate.value)
|
|
|
|
- const checkedRowKeysRef = ref<DataTableRowKey[]>([]);
|
|
|
|
- return {
|
|
|
|
- columns,
|
|
|
|
- inputPageNum1,
|
|
|
|
- inputPageNum2,
|
|
|
|
- loading,
|
|
|
|
- inputValue,
|
|
|
|
- NButton,
|
|
|
|
- NPopconfirm,
|
|
|
|
- NSpace,
|
|
|
|
- conditionParams,
|
|
|
|
- serchInput,
|
|
|
|
- pageDate,
|
|
|
|
- checkedRowKeys: checkedRowKeysRef,
|
|
|
|
- pagination,
|
|
|
|
- deleteSubjects,
|
|
|
|
- deleteSubjectsList,
|
|
|
|
- handleEditTable,
|
|
|
|
- // handleRefresh,
|
|
|
|
- visible,
|
|
|
|
- serchFormEr,
|
|
|
|
- editData,
|
|
|
|
- modalType,
|
|
|
|
- handleAddTable,
|
|
|
|
- openModal,
|
|
|
|
- setModalType,
|
|
|
|
- useBoolean, useLoading,
|
|
|
|
- rowKey: (row: RowData) => row.id,
|
|
|
|
- handleCheck(rowKeys: DataTableRowKey[]) {
|
|
|
|
- checkedRowKeysRef.value = rowKeys;
|
|
|
|
- // rowKeys.splice(0);
|
|
|
|
- // console.log(rowKeys)
|
|
|
|
- s.value = checkedRowKeysRef.value
|
|
|
|
- // rowKeys = []
|
|
|
|
- // d.length = 0
|
|
|
|
- // rowKeys.length = 0
|
|
|
|
- },
|
|
|
|
- // 根据条件查询
|
|
|
|
- handleInput1(v: number) {
|
|
|
|
- inputPageNum1.value = v;
|
|
|
|
- // pagination.page = inputPageNum1.value.data;
|
|
|
|
-
|
|
|
|
- },
|
|
|
|
- handleInput2(v: number) {
|
|
|
|
- inputPageNum2.value = v;
|
|
|
|
- // pagination.pageSize = inputPageNum2.value.data;
|
|
|
|
- },
|
|
|
|
- // 根据id查询
|
|
|
|
- handleChange(v: string) {
|
|
|
|
- inputValue.value = Number(v)
|
|
|
|
- },
|
|
|
|
- async serchForm() {
|
|
|
|
- await selectById(inputValue.value).then(r => {
|
|
|
|
- console.log(inputValue.value)
|
|
|
|
- serchInput.value = r.data as [];
|
|
|
|
- const filteredItems = Object.values(pageDate.value.filter(item => item.id === serchInput.value.id))
|
|
|
|
- // console.log(filteredItems,Array.isArray(filteredItems))
|
|
|
|
- serchFormEr.value = filteredItems;
|
|
|
|
- console.log(serchFormEr.value)
|
|
|
|
- })
|
|
|
|
- },
|
|
|
|
- async serchCondition() {
|
|
|
|
- await selectByCondition(inputPageNum1.value.data, inputPageNum2.value.data, conditionParams).then(r => {
|
|
|
|
- console.log(r)
|
|
|
|
- pageDate.value = r.data as [];
|
|
|
|
- pagination.page = inputPageNum1.value.data;
|
|
|
|
- pagination.pageSize = inputPageNum2.value.data;
|
|
|
|
- // console.log(inputPageNum1.value.data, pagination.page)
|
|
|
|
- })
|
|
|
|
- // console.log(inputPageNum1.value.data, inputPageNum2.value.data)
|
|
|
|
- }
|
|
|
|
- };
|
|
|
|
- }
|
|
|
|
-});
|
|
|
|
-export function init() {
|
|
|
|
- getTableData();
|
|
|
|
|
|
+function serchCondition() {
|
|
|
|
+ selectByCondition(pagination.page, pagination.pageSize, conditionParams).then(r => {
|
|
|
|
+ pageDate.value = r.data as [];
|
|
|
|
+ }).catch(() => {
|
|
|
|
+ console.log('jdias')
|
|
|
|
+ })
|
|
|
|
+}
|
|
|
|
+function init() {
|
|
|
|
+ serchCondition();
|
|
}
|
|
}
|
|
|
|
|
|
// 初始化
|
|
// 初始化
|
|
init();
|
|
init();
|
|
</script>
|
|
</script>
|
|
-
|
|
|
|
<style scoped></style>
|
|
<style scoped></style>
|