|
@@ -3,12 +3,8 @@
|
|
|
<el-header class="sa-header">
|
|
|
<!-- 简化搜索组件 -->
|
|
|
<div class="search-container">
|
|
|
- <sa-search-simple
|
|
|
- :searchFields="searchFields"
|
|
|
- :defaultValues="defaultSearchValues"
|
|
|
- @search="(val) => getData(1, val)"
|
|
|
- @reset="getData(1)"
|
|
|
- >
|
|
|
+ <sa-search-simple :searchFields="searchFields" :defaultValues="defaultSearchValues"
|
|
|
+ v-model="currentSearchParams" @search="handleSearch" @reset="handleReset">
|
|
|
</sa-search-simple>
|
|
|
</div>
|
|
|
<div class="sa-title sa-flex sa-row-between">
|
|
@@ -21,15 +17,8 @@
|
|
|
</el-header>
|
|
|
<el-main class="sa-p-0">
|
|
|
<div class="sa-table-wrap panel-block panel-block--bottom" v-loading="loading">
|
|
|
- <el-table
|
|
|
- height="100%"
|
|
|
- class="sa-table"
|
|
|
- :data="table.data"
|
|
|
- @selection-change="changeSelection"
|
|
|
- @sort-change="fieldFilter"
|
|
|
- row-key="id"
|
|
|
- stripe
|
|
|
- >
|
|
|
+ <el-table height="100%" class="sa-table" :data="table.data" @selection-change="changeSelection"
|
|
|
+ @sort-change="fieldFilter" row-key="id" stripe>
|
|
|
<template #empty>
|
|
|
<sa-empty />
|
|
|
</template>
|
|
@@ -45,12 +34,7 @@
|
|
|
</el-table-column>
|
|
|
<el-table-column label="等级图标" min-width="100">
|
|
|
<template #default="scope">
|
|
|
- <el-image
|
|
|
- v-if="scope.row.icon"
|
|
|
- :src="scope.row.icon"
|
|
|
- style="width: 40px; height: 40px"
|
|
|
- fit="cover"
|
|
|
- />
|
|
|
+ <el-image v-if="scope.row.icon" :src="scope.row.icon" style="width: 40px; height: 40px" fit="cover" />
|
|
|
<span v-else>-</span>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
@@ -75,13 +59,8 @@
|
|
|
<el-table-column fixed="right" label="操作" min-width="120">
|
|
|
<template #default="scope">
|
|
|
<el-button class="is-link" type="primary" @click="editRow(scope.row)">编辑</el-button>
|
|
|
- <el-popconfirm
|
|
|
- width="fit-content"
|
|
|
- confirm-button-text="确认"
|
|
|
- cancel-button-text="取消"
|
|
|
- title="确认删除这条记录?"
|
|
|
- @confirm="deleteApi(scope.row.id)"
|
|
|
- >
|
|
|
+ <el-popconfirm width="fit-content" confirm-button-text="确认" cancel-button-text="取消" title="确认删除这条记录?"
|
|
|
+ @confirm="deleteApi(scope.row.id)">
|
|
|
<template #reference>
|
|
|
<el-button class="is-link" type="danger"> 删除 </el-button>
|
|
|
</template>
|
|
@@ -93,11 +72,8 @@
|
|
|
</el-main>
|
|
|
<sa-view-bar>
|
|
|
<template #left>
|
|
|
- <sa-batch-handle
|
|
|
- :batchHandleTools="batchHandleTools"
|
|
|
- :selectedLeng="table.selected.length"
|
|
|
- @batchHandle="batchHandle"
|
|
|
- ></sa-batch-handle>
|
|
|
+ <sa-batch-handle :batchHandleTools="batchHandleTools" :selectedLeng="table.selected.length"
|
|
|
+ @batchHandle="batchHandle"></sa-batch-handle>
|
|
|
</template>
|
|
|
<template #right>
|
|
|
<sa-pagination :pageData="pageData" @updateFn="getData" />
|
|
@@ -106,141 +82,164 @@
|
|
|
</el-container>
|
|
|
</template>
|
|
|
<script setup>
|
|
|
- import { onMounted, reactive, ref } from 'vue';
|
|
|
- import { api } from '../user.service';
|
|
|
- import { ElMessageBox } from 'element-plus';
|
|
|
- import { useModal } from '@/sheep/hooks';
|
|
|
- import { usePagination } from '@/sheep/hooks';
|
|
|
- import levelEdit from './edit.vue';
|
|
|
- const { pageData } = usePagination();
|
|
|
+import { onMounted, reactive, ref } from 'vue';
|
|
|
+import { api } from '../user.service';
|
|
|
+import { ElMessageBox } from 'element-plus';
|
|
|
+import { useModal } from '@/sheep/hooks';
|
|
|
+import { usePagination } from '@/sheep/hooks';
|
|
|
+import levelEdit from './edit.vue';
|
|
|
+const { pageData } = usePagination();
|
|
|
|
|
|
- // 搜索字段配置
|
|
|
- const searchFields = reactive({
|
|
|
- name: {
|
|
|
- type: 'input',
|
|
|
- label: '等级名称',
|
|
|
- placeholder: '请输入等级名称',
|
|
|
- width: 200,
|
|
|
- },
|
|
|
- });
|
|
|
- // 默认搜索值
|
|
|
- const defaultSearchValues = reactive({
|
|
|
- name: '',
|
|
|
- });
|
|
|
- // 列表
|
|
|
- const table = reactive({
|
|
|
- data: [],
|
|
|
- order: '',
|
|
|
- sort: '',
|
|
|
- selected: [],
|
|
|
+// 搜索字段配置
|
|
|
+const searchFields = reactive({
|
|
|
+ name: {
|
|
|
+ type: 'input',
|
|
|
+ label: '等级名称',
|
|
|
+ placeholder: '请输入等级名称',
|
|
|
+ width: 200,
|
|
|
+ },
|
|
|
+});
|
|
|
+// 默认搜索值
|
|
|
+const defaultSearchValues = reactive({
|
|
|
+ name: '',
|
|
|
+});
|
|
|
+
|
|
|
+// 当前搜索条件 - 使用 ref 支持双向绑定
|
|
|
+const currentSearchParams = ref({});
|
|
|
+// 列表
|
|
|
+const table = reactive({
|
|
|
+ data: [],
|
|
|
+ order: '',
|
|
|
+ sort: '',
|
|
|
+ selected: [],
|
|
|
+});
|
|
|
+const loading = ref(true);
|
|
|
+// 获取
|
|
|
+async function getData(page, searchParams = null) {
|
|
|
+ if (page) pageData.page = page;
|
|
|
+ loading.value = true;
|
|
|
+
|
|
|
+ // 构建请求参数 - 优先使用传入的参数,否则使用双向绑定的搜索条件
|
|
|
+ const finalSearchParams = searchParams !== null ? searchParams : currentSearchParams.value;
|
|
|
+
|
|
|
+ const { code, data } = await api.level.list({
|
|
|
+ page: pageData.page,
|
|
|
+ size: pageData.size,
|
|
|
+ order: table.order,
|
|
|
+ ...finalSearchParams,
|
|
|
+ sort: table.sort,
|
|
|
});
|
|
|
- const loading = ref(true);
|
|
|
- // 获取
|
|
|
- async function getData(page, searchParams = {}) {
|
|
|
- if (page) pageData.page = page;
|
|
|
- loading.value = true;
|
|
|
- const { code, data } = await api.level.list({
|
|
|
- page: pageData.page,
|
|
|
- size: pageData.size,
|
|
|
- order: table.order,
|
|
|
- ...searchParams,
|
|
|
- sort: table.sort,
|
|
|
- });
|
|
|
- console.log('API 响应:', error, data);
|
|
|
- if (code == 200) {
|
|
|
- table.data = data.data;
|
|
|
- pageData.page = data.current_page;
|
|
|
- pageData.size = data.per_page;
|
|
|
- pageData.total = data.total;
|
|
|
- }
|
|
|
- loading.value = false;
|
|
|
- }
|
|
|
- // table 字段排序
|
|
|
- function fieldFilter({ prop, order }) {
|
|
|
- table.order = order == 'ascending' ? 'asc' : 'desc';
|
|
|
- table.sort = prop;
|
|
|
- getData();
|
|
|
+ console.log('API 响应:', error, data);
|
|
|
+ if (code == 200) {
|
|
|
+ table.data = data.data;
|
|
|
+ pageData.page = data.current_page;
|
|
|
+ pageData.size = data.per_page;
|
|
|
+ pageData.total = data.total;
|
|
|
}
|
|
|
- //table批量选择
|
|
|
- function changeSelection(row) {
|
|
|
- table.selected = row;
|
|
|
- }
|
|
|
- // 分页/批量操作
|
|
|
- const batchHandleTools = [
|
|
|
+ loading.value = false;
|
|
|
+}
|
|
|
+
|
|
|
+// 搜索处理函数
|
|
|
+function handleSearch(searchParams) {
|
|
|
+ // 由于使用了 v-model,currentSearchParams 会自动更新
|
|
|
+ // 直接调用 getData,会自动使用当前的搜索条件
|
|
|
+ getData(1);
|
|
|
+}
|
|
|
+
|
|
|
+// 重置搜索参数处理函数
|
|
|
+function handleReset() {
|
|
|
+ // 手动清空搜索参数
|
|
|
+ currentSearchParams.value = {};
|
|
|
+ // 传递空参数重新请求数据
|
|
|
+ getData(1, {});
|
|
|
+}
|
|
|
+// table 字段排序
|
|
|
+function fieldFilter({ prop, order }) {
|
|
|
+ table.order = order == 'ascending' ? 'asc' : 'desc';
|
|
|
+ table.sort = prop;
|
|
|
+ getData();
|
|
|
+}
|
|
|
+//table批量选择
|
|
|
+function changeSelection(row) {
|
|
|
+ table.selected = row;
|
|
|
+}
|
|
|
+// 分页/批量操作
|
|
|
+const batchHandleTools = [
|
|
|
+ {
|
|
|
+ type: 'delete',
|
|
|
+ label: '删除',
|
|
|
+ auth: 'shop.admin.user.level.delete',
|
|
|
+ class: 'danger',
|
|
|
+ },
|
|
|
+];
|
|
|
+function addRow() {
|
|
|
+ useModal(
|
|
|
+ levelEdit,
|
|
|
+ { title: '新建等级', type: 'add' },
|
|
|
{
|
|
|
- type: 'delete',
|
|
|
- label: '删除',
|
|
|
- auth: 'shop.admin.user.level.delete',
|
|
|
- class: 'danger',
|
|
|
- },
|
|
|
- ];
|
|
|
- function addRow() {
|
|
|
- useModal(
|
|
|
- levelEdit,
|
|
|
- { title: '新建等级', type: 'add' },
|
|
|
- {
|
|
|
- confirm: () => {
|
|
|
- getData();
|
|
|
- },
|
|
|
- },
|
|
|
- );
|
|
|
- }
|
|
|
- function editRow(row) {
|
|
|
- useModal(
|
|
|
- levelEdit,
|
|
|
- {
|
|
|
- title: '编辑等级',
|
|
|
- type: 'edit',
|
|
|
- id: row.id,
|
|
|
- },
|
|
|
- {
|
|
|
- confirm: () => {
|
|
|
- getData();
|
|
|
- },
|
|
|
+ confirm: () => {
|
|
|
+ getData();
|
|
|
},
|
|
|
- );
|
|
|
- }
|
|
|
- // 删除api 单独批量可以直接调用
|
|
|
- async function deleteApi(id) {
|
|
|
- await api.level.delete(id);
|
|
|
- getData();
|
|
|
- }
|
|
|
- async function batchHandle(type) {
|
|
|
- let ids = [];
|
|
|
- table.selected.forEach((row) => {
|
|
|
- ids.push(row.id);
|
|
|
- });
|
|
|
- switch (type) {
|
|
|
- case 'delete':
|
|
|
- ElMessageBox.confirm('此操作将删除, 是否继续?', '提示', {
|
|
|
- confirmButtonText: '确定',
|
|
|
- cancelButtonText: '取消',
|
|
|
- type: 'warning',
|
|
|
- }).then(() => {
|
|
|
- deleteApi(ids.join(','));
|
|
|
- });
|
|
|
- break;
|
|
|
- default:
|
|
|
- await api.level.edit(ids.join(','), {
|
|
|
- status: type,
|
|
|
- });
|
|
|
+ },
|
|
|
+ );
|
|
|
+}
|
|
|
+function editRow(row) {
|
|
|
+ useModal(
|
|
|
+ levelEdit,
|
|
|
+ {
|
|
|
+ title: '编辑等级',
|
|
|
+ type: 'edit',
|
|
|
+ id: row.id,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ confirm: () => {
|
|
|
getData();
|
|
|
- }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ );
|
|
|
+}
|
|
|
+// 删除api 单独批量可以直接调用
|
|
|
+async function deleteApi(id) {
|
|
|
+ await api.level.delete(id);
|
|
|
+ getData();
|
|
|
+}
|
|
|
+async function batchHandle(type) {
|
|
|
+ let ids = [];
|
|
|
+ table.selected.forEach((row) => {
|
|
|
+ ids.push(row.id);
|
|
|
+ });
|
|
|
+ switch (type) {
|
|
|
+ case 'delete':
|
|
|
+ ElMessageBox.confirm('此操作将删除, 是否继续?', '提示', {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning',
|
|
|
+ }).then(() => {
|
|
|
+ deleteApi(ids.join(','));
|
|
|
+ });
|
|
|
+ break;
|
|
|
+ default:
|
|
|
+ await api.level.edit(ids.join(','), {
|
|
|
+ status: type,
|
|
|
+ });
|
|
|
+ getData();
|
|
|
}
|
|
|
+}
|
|
|
|
|
|
- onMounted(() => {
|
|
|
- getData();
|
|
|
- });
|
|
|
+onMounted(() => {
|
|
|
+ getData();
|
|
|
+});
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
- .user-level-view {
|
|
|
- .el-header {
|
|
|
- height: auto;
|
|
|
- }
|
|
|
- .el-main {
|
|
|
- .sa-table-wrap {
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
+.user-level-view {
|
|
|
+ .el-header {
|
|
|
+ height: auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-main {
|
|
|
+ .sa-table-wrap {
|
|
|
+ height: 100%;
|
|
|
}
|
|
|
}
|
|
|
+}
|
|
|
</style>
|