|
@@ -5,7 +5,7 @@
|
|
|
<n-space class="pb-14px" justify="space-between">
|
|
|
<!-- 加入查询组件 -->
|
|
|
<n-space>
|
|
|
- <n-button type="primary" :data="addData" @click="addTableData">
|
|
|
+ <n-button type="primary" @click="addTableData">
|
|
|
<icon-ic-round-plus class="mr-4px text-20px" />
|
|
|
新增
|
|
|
</n-button>
|
|
@@ -19,7 +19,7 @@
|
|
|
查询
|
|
|
</n-button>
|
|
|
<n-input-group>
|
|
|
- <n-input :style="{ width: '100%', }" placeholder="请输入id查询..." @clear="searchClear" @keydown="handleKeyDown" @change="handleChange"
|
|
|
+ <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">
|
|
|
搜索
|
|
@@ -46,9 +46,9 @@
|
|
|
</n-button>
|
|
|
</n-space>
|
|
|
</n-space>
|
|
|
- <n-data-table v-if="searchForm.length > 0" :columns="columns" :data="searchForm" :loading="loading"
|
|
|
+ <n-data-table v-if="searchForm.length > 0" :columns="createColumns" :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"
|
|
|
+ <n-data-table v-if="searchForm.length <= 0" :columns="createColumns" :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>
|
|
@@ -56,19 +56,16 @@
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
-<script lang="tsx" >
|
|
|
-import { defineComponent, ref } from 'vue'
|
|
|
+<script setup lang="tsx" >
|
|
|
+import { ref } from 'vue'
|
|
|
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'
|
|
|
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, selectById_1 } from '~/src/service/api/sort';
|
|
|
-import type { AddEasEduCategoryParams } from '~/src/service/api/sort';
|
|
|
-// import ColumnSearch from './components/column-search.vue';
|
|
|
import { selectByCondition_1 } from '~/src/service/api/sort';
|
|
|
import type { SelectByCondition_1Params } from '~/src/service/api/sort';
|
|
|
type RowData = {
|
|
@@ -81,19 +78,17 @@ type RowData = {
|
|
|
createUid: number
|
|
|
disabled: string
|
|
|
}
|
|
|
-
|
|
|
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 searchData = ref<any[]>([]);
|
|
|
+// const searchData = ref<any[]>([]);
|
|
|
const searchConData = ref<any[]>([]);
|
|
|
const searchpagedata = ref<number>(0)
|
|
|
const searchpagesize = ref<number>(0)
|
|
|
-// const search = ref([]) as any;
|
|
|
+
|
|
|
function searchPage(v: number | null) {
|
|
|
searchpagedata.value = Number(v)
|
|
|
}
|
|
@@ -108,13 +103,11 @@ const pagination: PaginationProps = ref({
|
|
|
onChange: (page: number) => {
|
|
|
// 处理页码变化
|
|
|
pagination.page = page;
|
|
|
- console.log(pagination.page);
|
|
|
},
|
|
|
onUpdatePageSize: (pageSize: number) => {
|
|
|
// 处理每页显示数量变化
|
|
|
pagination.pageSize = pageSize;
|
|
|
pagination.page = 1;
|
|
|
- console.log(pagination.pageSize);
|
|
|
}
|
|
|
}).value;
|
|
|
|
|
@@ -123,11 +116,8 @@ function searchCondition() {
|
|
|
const pageSize = searchpagesize.value as number;
|
|
|
const params: SelectByCondition_1Params = {};
|
|
|
if(pageNum && pageSize){
|
|
|
- console.log(pageNum,pageSize);
|
|
|
selectByCondition_1(pageNum, pageSize, params).then(res => {
|
|
|
- console.log(pageNum,pageSize);
|
|
|
searchConData.value = res.data as [];
|
|
|
- console.log(searchConData.value);
|
|
|
pagination.page =searchpagedata.value
|
|
|
pagination.pageSize=searchpagesize.value
|
|
|
window.$message?.success('查询成功');
|
|
@@ -147,6 +137,7 @@ export async function getTableData() {
|
|
|
endLoading();
|
|
|
}, 1000);
|
|
|
});
|
|
|
+ checkedRowKeysRef.value=[]
|
|
|
}
|
|
|
function init() {
|
|
|
getTableData();
|
|
@@ -163,14 +154,12 @@ function searchConClear(){
|
|
|
|
|
|
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() {
|
|
@@ -180,15 +169,9 @@ async function handleSearch() {
|
|
|
// 更新数据
|
|
|
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
|
|
@@ -196,37 +179,26 @@ async function handleSearch() {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-
|
|
|
function searchClear() {
|
|
|
searchForm.value.length = 0
|
|
|
getTableData();
|
|
|
}
|
|
|
|
|
|
-
|
|
|
const checkedRowKeysRef = ref<DataTableRowKey[]>([])
|
|
|
-
|
|
|
+ const s = ref<DataTableRowKey[]>([])
|
|
|
// 根据id进行删除
|
|
|
async function deleteTableData() {
|
|
|
- const ids = checkedRowKeysRef.value;
|
|
|
- // console.log(ids);
|
|
|
+ const ids = checkedRowKeysRef.value.filter((item)=>!s.value?.includes(item));
|
|
|
+ s.value=checkedRowKeysRef.value
|
|
|
if (ids.length !== 0) {
|
|
|
console.log(ids);
|
|
|
for (const id of ids) {
|
|
|
// 调用删除接口
|
|
|
- console.log(id);
|
|
|
- checkedRowKeysRef.value= []
|
|
|
await deleteById(id as number)
|
|
|
.then((res) => {
|
|
|
- // const deleteRes = res.data;
|
|
|
- console.log(`成功删除课程,ID: ${id}`);
|
|
|
window.$message?.success('删除成功!');
|
|
|
})
|
|
|
- .catch((error) => {
|
|
|
- // 错误处理
|
|
|
- console.error(`删除课程发生错误,ID: ${id}`, error);
|
|
|
- window.$message?.error('删除失败!');
|
|
|
- });
|
|
|
- } checkedRowKeysRef.value= []
|
|
|
+ }
|
|
|
getTableData(); // 删除完成后刷新表格数据
|
|
|
} else {
|
|
|
// 没有选择任何行时的操作
|
|
@@ -238,18 +210,11 @@ 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);
|
|
@@ -264,7 +229,6 @@ function handleEditTable(rowId: number | null) {
|
|
|
if (findItem) {
|
|
|
setEditData(findItem);
|
|
|
}
|
|
|
- // console.log(findItem);
|
|
|
getTableData(); // 编辑完成后刷新表格数据
|
|
|
}
|
|
|
|
|
@@ -272,7 +236,6 @@ 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(); // 编辑完成后刷新表格数据
|
|
|
})
|
|
|
}
|
|
@@ -353,54 +316,19 @@ const createColumns = (): DataTableColumns<UserManagement.User> => [
|
|
|
},
|
|
|
]
|
|
|
|
|
|
-export default defineComponent({
|
|
|
- components: {
|
|
|
- TableActionAdd,
|
|
|
- // ColumnSearch
|
|
|
- },
|
|
|
- setup() {
|
|
|
- return {
|
|
|
- showSearch,
|
|
|
- searchPage,
|
|
|
- searchSize,
|
|
|
- tableData,
|
|
|
- addData,
|
|
|
- searchConClear,
|
|
|
- searchCondition,
|
|
|
- loading,
|
|
|
- modalType,
|
|
|
- searchData,
|
|
|
- setEditData,
|
|
|
- handleSearch,
|
|
|
- searchId,
|
|
|
- searchForm,
|
|
|
- editData,
|
|
|
- handleChange,
|
|
|
- getTableData,
|
|
|
- addTableData,
|
|
|
- setModalType,
|
|
|
- deleteTableData,
|
|
|
- handleEditTable,
|
|
|
- searchClear,
|
|
|
- handleOpenSearch,
|
|
|
- visible,
|
|
|
- columns: createColumns(),
|
|
|
- checkedRowKeys: checkedRowKeysRef,
|
|
|
- pagination,
|
|
|
- rowKey: (row: RowData) => row.id,
|
|
|
- handleCheck(rowKeys: DataTableRowKey[]) {
|
|
|
- checkedRowKeysRef.value = rowKeys
|
|
|
- console.log(checkedRowKeysRef.value);
|
|
|
- },
|
|
|
- handleKeyDown(event:KeyboardEvent) {
|
|
|
- if (event.key === 'Backspace' && searchId.value===0) {
|
|
|
- // 处理删除键按下且输入框为空的情况
|
|
|
- // 执行刷新操作,例如调用 API 获取原来的列表数据
|
|
|
- getTableData()
|
|
|
- }
|
|
|
- console.log(1);
|
|
|
- },
|
|
|
- }
|
|
|
- }
|
|
|
-})
|
|
|
+const rowKey= (row: RowData) => row.id
|
|
|
+function handleCheck(rowKeys: DataTableRowKey[]) {
|
|
|
+ checkedRowKeysRef.value = rowKeys
|
|
|
+}
|
|
|
+ // handleKeyDown(event:KeyboardEvent) {
|
|
|
+ // if (event.key === 'Backspace' && searchId.value===0) {
|
|
|
+ // // 处理删除键按下且输入框为空的情况
|
|
|
+ // // 执行刷新操作,例如调用 API 获取原来的列表数据
|
|
|
+ // getTableData()
|
|
|
+ // }
|
|
|
+ // console.log(1);
|
|
|
+ // },
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
</script>
|