|
@@ -1,7 +1,10 @@
|
|
|
<template>
|
|
|
<div class="h-full overflow-hidden">
|
|
|
<n-card title="课程分类" :bordered="false" class="rounded-16px shadow-sm">
|
|
|
+ <!-- <column-search v-if="showSearch" @close="handleCloseSearch" /> -->
|
|
|
+ <column-search v-if="showSearch" v-model:columns="columns" />
|
|
|
<n-space class="pb-12px" justify="space-between">
|
|
|
+ <!-- 加入查询组件 -->
|
|
|
<n-space>
|
|
|
<n-button type="primary" :data="addData" @click="addTableData">
|
|
|
<icon-ic-round-plus class="mr-4px text-20px" />
|
|
@@ -11,29 +14,39 @@
|
|
|
<icon-ic-round-delete class="mr-4px text-20px" />
|
|
|
删除
|
|
|
</n-button>
|
|
|
- <n-button type="success">
|
|
|
- <icon-uil:export class="mr-4px text-20px" />
|
|
|
- 导出Excel
|
|
|
- </n-button>
|
|
|
+ <!-- 添加查询按钮 -->
|
|
|
+ <n-button type="primary" @click="handleOpenSearch">
|
|
|
+ <icon-simple-line-icons:magnifier class="mr-4px text-16px" />
|
|
|
+ 查询
|
|
|
+ </n-button>
|
|
|
+ <n-input-group>
|
|
|
+ <n-input :style="{ width: '100%' }" placeholder="请输入id查询..." @clear="searchClear" @change="handleChange" @keyup.enter="handleSearch"
|
|
|
+ v-model="searchId" clearable />
|
|
|
+ <n-button type="primary" ghost @click="handleSearch()">
|
|
|
+ 搜索
|
|
|
+ </n-button>
|
|
|
+ </n-input-group>
|
|
|
+
|
|
|
</n-space>
|
|
|
<n-space align="center" :size="18">
|
|
|
<n-button size="small" type="primary" @click="getTableData">
|
|
|
<icon-mdi-refresh class="mr-4px text-16px" :class="{ 'animate-spin': loading }" />
|
|
|
刷新表格
|
|
|
</n-button>
|
|
|
- <column-search v-model:columns="columns" />
|
|
|
</n-space>
|
|
|
</n-space>
|
|
|
- <n-data-table :columns="columns" :data="tableData" :loading="loading" :pagination="pagination" :row-key="rowKey"
|
|
|
- @update:checked-row-keys="handleCheck" />
|
|
|
- <table-action-add v-model:visible="visible" :type="modalType" :edit-data="editData"/>
|
|
|
+ <n-data-table v-if="searchForm.length > 0" :columns="columns" :data="searchForm" :loading="loading"
|
|
|
+ :pagination="pagination" :row-key="rowKey" @update:checked-row-keys="handleCheck" />
|
|
|
+ <n-data-table v-if="searchForm.length <= 0" :columns="columns" :data="tableData" :loading="loading"
|
|
|
+ :pagination="pagination" :row-key="rowKey" @update:checked-row-keys="handleCheck" />
|
|
|
+ <table-action-add v-model:visible="visible" :type="modalType" :edit-data="editData" />
|
|
|
</n-card>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script lang="tsx" >
|
|
|
import { defineComponent, ref } from 'vue'
|
|
|
-import { NButton, NSpace,NTag ,NPopconfirm} from 'naive-ui';
|
|
|
+import { NButton, NSpace, NTag, NPopconfirm } from 'naive-ui';
|
|
|
import type { DataTableColumns, PaginationProps } from 'naive-ui';
|
|
|
import { useBoolean, useLoading } from '@/hooks';
|
|
|
import type { DataTableRowKey } from 'naive-ui'
|
|
@@ -41,8 +54,8 @@ import TableActionAdd from './components/table-action-add.vue'
|
|
|
import type { ModalType } from './components/table-action-add.vue';
|
|
|
// import { userStatusLabels } from '@/constants';
|
|
|
import { userStatusLabels } from '@/constants';
|
|
|
-import { selectAll_1, deleteById } from '~/src/service/api/sort';
|
|
|
-import type { AddEasEduCategoryParams } from '~/src/service/api/sort';
|
|
|
+import { selectAll_1, deleteById, selectById_1} from '~/src/service/api/sort';
|
|
|
+import type { AddEasEduCategoryParams} from '~/src/service/api/sort';
|
|
|
import ColumnSearch from './components/column-search.vue';
|
|
|
type RowData = {
|
|
|
key: number
|
|
@@ -58,8 +71,10 @@ const { loading, startLoading, endLoading } = useLoading(false);
|
|
|
const { bool: visible, setTrue: openModal } = useBoolean();
|
|
|
|
|
|
const tableData = ref<any[]>([]);
|
|
|
+const searchInput = ref([]) as any;
|
|
|
+const searchForm = ref([]) as any;
|
|
|
+const searchId = ref<number>(0); // 定义为数字类型,默认值为0
|
|
|
|
|
|
-// const checkedRowKeysRef = ref<DataTableRowKey[]>([])
|
|
|
const pagination: PaginationProps = ref({
|
|
|
page: 1,
|
|
|
pageSize: 10,
|
|
@@ -78,18 +93,70 @@ const pagination: PaginationProps = ref({
|
|
|
|
|
|
export async function getTableData() {
|
|
|
startLoading();
|
|
|
- selectAll_1().then(res => {
|
|
|
- setTimeout(() => {
|
|
|
- // console.log(res);
|
|
|
- tableData.value = res.data as [];
|
|
|
- endLoading();
|
|
|
- }, 1000);
|
|
|
- });
|
|
|
+ selectAll_1().then(res => {
|
|
|
+ setTimeout(() => {
|
|
|
+ // console.log(res);
|
|
|
+ tableData.value = res.data as [];
|
|
|
+ endLoading();
|
|
|
+ }, 1000);
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+function init() {
|
|
|
+ getTableData();
|
|
|
+}
|
|
|
+// 初始化
|
|
|
+init();
|
|
|
+
|
|
|
+const showSearch = ref(false)
|
|
|
+function handleOpenSearch() {
|
|
|
+ // 点击查询时显示搜索框
|
|
|
+ showSearch.value = !showSearch.value;
|
|
|
}
|
|
|
|
|
|
+// 输入数据
|
|
|
+function handleChange(v: string) {
|
|
|
+ // console.log(v);
|
|
|
+ searchId.value = Number(v)
|
|
|
+
|
|
|
+ console.log(searchId.value);
|
|
|
+}
|
|
|
+// 根据id查询数据
|
|
|
+async function handleSearch() {
|
|
|
+ // console.log(searchId.value);
|
|
|
+ if(searchId.value){
|
|
|
+ await selectById_1(searchId.value)
|
|
|
+ .then(res => {
|
|
|
+ // 更新数据
|
|
|
+ // tableData.value = res.data as [];
|
|
|
+ searchInput.value = res.data as [];
|
|
|
+ const filteredItems = tableData.value.filter(item => item.id === searchInput.value.id)
|
|
|
+ // console.log(filteredItems);
|
|
|
+ searchForm.value = filteredItems;
|
|
|
+ console.log(searchForm.value);
|
|
|
+ window.$message?.success('查询成功');
|
|
|
+ })
|
|
|
+ .catch(err => {
|
|
|
+ window.$message?.warning('请输入有效的ID进行查询');
|
|
|
+ console.error('查询失败', err);
|
|
|
+ });
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ searchForm.value.length=0
|
|
|
+ // ID为空或无效时的处理
|
|
|
+ // getTableData();
|
|
|
+ window.$message?.warning('请输入有效的ID进行查询');
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+function searchClear(){
|
|
|
+ searchForm.value.length=0
|
|
|
+ getTableData();
|
|
|
+}
|
|
|
|
|
|
const checkedRowKeysRef = ref<DataTableRowKey[]>([])
|
|
|
|
|
|
+// 根据id进行删除
|
|
|
async function deleteTableData() {
|
|
|
const ids = checkedRowKeysRef.value;
|
|
|
// console.log(ids);
|
|
@@ -101,9 +168,10 @@ async function deleteTableData() {
|
|
|
await deleteById(id as number)
|
|
|
.then((res) => {
|
|
|
const deleteRes = res.data;
|
|
|
- if (!deleteRes)
|
|
|
+ if (!deleteRes){
|
|
|
console.log(`成功删除课程,ID: ${id}`);
|
|
|
- window.$message?.success('删除成功!');
|
|
|
+ window.$message?.success('删除成功!');
|
|
|
+ }
|
|
|
})
|
|
|
.catch((error) => {
|
|
|
// 错误处理
|
|
@@ -114,7 +182,51 @@ async function deleteTableData() {
|
|
|
getTableData(); // 删除完成后刷新表格数据
|
|
|
} else {
|
|
|
// 没有选择任何行时的操作
|
|
|
- console.warn('未选择要删除的行');
|
|
|
+ window.$message?.error('未选择要删除的行');
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+const modalType = ref<ModalType>('add' || 'edit');
|
|
|
+
|
|
|
+function setModalType(type: ModalType) {
|
|
|
+ modalType.value = type;
|
|
|
+ // console.log(modalType.value);
|
|
|
+}
|
|
|
+// 添加
|
|
|
+const addData = ref<AddEasEduCategoryParams[]>([]);
|
|
|
+function addTableData() {
|
|
|
+ openModal();
|
|
|
+ setModalType('add');
|
|
|
+ // const params: AddEasEduCategoryParams = {};
|
|
|
+ // addEasEduCategory(params).then(res => {
|
|
|
+ // console.log(res);
|
|
|
+ // addData.value = res.data as [];
|
|
|
+ // });
|
|
|
+}
|
|
|
+
|
|
|
+const editData = ref<UserManagement.User | null>(null);
|
|
|
+function setEditData(data: UserManagement.User | null) {
|
|
|
+ editData.value = data;
|
|
|
+}
|
|
|
+console.log(tableData.value);
|
|
|
+function handleEditTable(rowId: number | null) {
|
|
|
+ const findItem = tableData.value.find(item => item.id === rowId);
|
|
|
+ setModalType('edit');
|
|
|
+ openModal();
|
|
|
+ if (findItem) {
|
|
|
+ setEditData(findItem);
|
|
|
+ }
|
|
|
+ // console.log(findItem);
|
|
|
+ getTableData(); // 编辑完成后刷新表格数据
|
|
|
+}
|
|
|
+
|
|
|
+function handleDeleteTable(rowId: number | null) {
|
|
|
+ const findItem = tableData.value.find(item => item.id === rowId);
|
|
|
+ if (findItem) {
|
|
|
+ deleteById(findItem.id).then((r) => {
|
|
|
+ console.log(r);
|
|
|
+ getTableData(); // 编辑完成后刷新表格数据
|
|
|
+ })
|
|
|
}
|
|
|
}
|
|
|
|
|
@@ -126,7 +238,8 @@ const createColumns = (): DataTableColumns<UserManagement.User> => [
|
|
|
{
|
|
|
key: 'id',
|
|
|
title: "ID",
|
|
|
- align: 'center'
|
|
|
+ align: 'center',
|
|
|
+
|
|
|
},
|
|
|
{
|
|
|
key: 'name',
|
|
@@ -161,11 +274,11 @@ const createColumns = (): DataTableColumns<UserManagement.User> => [
|
|
|
render: row => {
|
|
|
if (row.disabled) {
|
|
|
const tagTypes: Record<UserManagement.UserStatusKey, NaiveUI.ThemeColor> = {
|
|
|
- 'Y': 'success',
|
|
|
'N': 'error',
|
|
|
+ 'Y': 'success',
|
|
|
};
|
|
|
return <NTag type={tagTypes[row.disabled]}>{userStatusLabels[row.disabled]}</NTag>;
|
|
|
- }
|
|
|
+ }
|
|
|
return
|
|
|
}
|
|
|
},
|
|
@@ -176,7 +289,7 @@ const createColumns = (): DataTableColumns<UserManagement.User> => [
|
|
|
render: row => {
|
|
|
return (
|
|
|
<NSpace justify={'center'}>
|
|
|
- <NButton size={'small'} onClick={() => handleEditTable(row.id)} >
|
|
|
+ <NButton size={'small'} onClick={() => handleEditTable(row.id)} >
|
|
|
编辑
|
|
|
</NButton>
|
|
|
<NPopconfirm onPositiveClick={() => handleDeleteTable(row.id)}>
|
|
@@ -192,79 +305,33 @@ const createColumns = (): DataTableColumns<UserManagement.User> => [
|
|
|
},
|
|
|
]
|
|
|
|
|
|
-const modalType = ref<ModalType>('add'||'edit');
|
|
|
-
|
|
|
-function setModalType(type: ModalType) {
|
|
|
- modalType.value = type;
|
|
|
- // console.log(modalType.value);
|
|
|
-}
|
|
|
-
|
|
|
-const addData = ref<AddEasEduCategoryParams[]>([]);
|
|
|
-function addTableData() {
|
|
|
- openModal();
|
|
|
- setModalType('add');
|
|
|
- getTableData(); // 删除完成后刷新表格数据
|
|
|
- // const params: AddEasEduCategoryParams = {};
|
|
|
- // addEasEduCategory(params).then(res => {
|
|
|
- // console.log(res);
|
|
|
- // addData.value = res.data as [];
|
|
|
- // });
|
|
|
-}
|
|
|
-
|
|
|
-const editData = ref<UserManagement.User | null>(null);
|
|
|
-function setEditData(data: UserManagement.User | null) {
|
|
|
- editData.value = data;
|
|
|
-}
|
|
|
-console.log(tableData.value);
|
|
|
-function handleEditTable(rowId: number|null ) {
|
|
|
- const findItem = tableData.value.find(item => item.id === rowId);
|
|
|
- setModalType('edit');
|
|
|
- openModal();
|
|
|
- if (findItem) {
|
|
|
- setEditData(findItem);
|
|
|
- }
|
|
|
- // console.log(findItem);
|
|
|
- getTableData(); // 编辑完成后刷新表格数据
|
|
|
-}
|
|
|
-
|
|
|
- function handleDeleteTable(rowId: number|null ) {
|
|
|
- const findItem = tableData.value.find(item => item.id === rowId);
|
|
|
- if (findItem) {
|
|
|
- deleteById(findItem.id).then((r)=>{
|
|
|
- console.log(r);
|
|
|
- getTableData(); // 编辑完成后刷新表格数据
|
|
|
- })
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-function init() {
|
|
|
- getTableData();
|
|
|
-}
|
|
|
-
|
|
|
-// 初始化
|
|
|
-init();
|
|
|
-
|
|
|
export default defineComponent({
|
|
|
components: {
|
|
|
TableActionAdd,
|
|
|
ColumnSearch
|
|
|
},
|
|
|
setup() {
|
|
|
- // const checkedRowKeysRef = ref<DataTableRowKey[]>([])
|
|
|
return {
|
|
|
+ showSearch,
|
|
|
tableData,
|
|
|
addData,
|
|
|
loading,
|
|
|
modalType,
|
|
|
setEditData,
|
|
|
+ handleSearch,
|
|
|
+ searchId,
|
|
|
+ searchForm,
|
|
|
editData,
|
|
|
+ handleChange,
|
|
|
getTableData,
|
|
|
addTableData,
|
|
|
setModalType,
|
|
|
deleteTableData,
|
|
|
handleEditTable,
|
|
|
+ searchClear,
|
|
|
+ handleOpenSearch,
|
|
|
visible,
|
|
|
- columns:createColumns(),
|
|
|
+ columns: createColumns(),
|
|
|
checkedRowKeys: checkedRowKeysRef,
|
|
|
pagination,
|
|
|
rowKey: (row: RowData) => row.id,
|