<!-- 表格页加上搜索条件 --> <template> <div class="list-view-with-head"> <!-- <head-form :form-config="headFormConfig" @headBtnClick="btnClick" /> --> <BaseSearchForm :head-config="headConfig" @btn-click="handleBtnClick" /> <BaseListTable v-loading="tableLoading" :table-config="tableConfig.table" :column-config="tableConfig.column" :table-data="dataList" @operate-event="handleOperate" /> <el-pagination class="mt-5 flex justify-end" @size-change="handleSizeChange" @current-change="handlePageChange" :current-page.sync="page" :page-sizes="[1, 5, 10, 20, 50, 100]" :page-size="size" :total="totalPage" layout="total, sizes, prev, pager, next, jumper" ></el-pagination> <!-- :current-page.sync="currentPage" :page-size.sync="pageSize" --> <DialogWithMenu ref="edit-dialog" v-if="dialogType === DIALOG_WITH_MENU" :dialog-visible.sync="dialogVisible" :configs="dialogConfigs" @refreshDataList="getList" /> <DialogJustForm ref="edit-dialog" v-if="dialogType === DIALOG_JUST_FORM" :dialog-visible.sync="dialogVisible" :configs="dialogConfigs" @refreshDataList="getList" /> </div> </template> <script> import BaseListTable from "@/components/BaseListTable.vue"; import BaseSearchForm from "@/components/BaseSearchForm.vue"; import DialogWithMenu from "@/components/DialogWithMenu.vue"; import DialogJustForm from "@/components/DialogJustForm.vue"; const DIALOG_WITH_MENU = "DialogWithMenu"; const DIALOG_JUST_FORM = "DialogJustForm"; export default { name: "ListViewWithHead", components: { BaseSearchForm, BaseListTable, DialogWithMenu, DialogJustForm }, props: { tableConfig: { type: Object, default: () => ({ /** 列配置, 即 props **/ columnConfig: [], /** 表格整体配置 */ tableConfig: undefined, }), }, headConfig: { type: Object, default: () => ({}), }, /** 请求page接口的时候有些字段是必填的,没有会报500,把相关字段名传入这个prop: */ listQueryExtra: { type: Array, default: () => ["key"], }, initDataWhenLoad: { type: Boolean, default: true }, /** dialog configs 或许可以从 tableConfig 计算出来 computed... */ dialogConfigs: { type: Object, default: () => ({}), }, }, computed: { dialogType() { return this.dialogConfigs.menu ? DIALOG_WITH_MENU : DIALOG_JUST_FORM; }, }, data() { return { DIALOG_WITH_MENU, DIALOG_JUST_FORM, dialogVisible: false, topBtnConfig: null, totalPage: 100, page: 1, size: 20, // 默认20 dataList: [], tableLoading: false, }; }, inject: ["urls"], mounted() { this.initDataWhenLoad && this.getList(); }, methods: { /** * 转换服务器数据的中间层 * 为了抹平真实服务器数据和我本地的测试服务器数据的差异 **/ prehandle_data(list) { /** 根据具体情况修改 */ list.forEach((data) => { data.id = data._id; delete data._id; }); return list; }, /** 获取 列表数据 */ getList(queryParams) { this.tableLoading = true; const params = queryParams ? { ...queryParams, page: this.page, limit: this.size } : { page: this.page, limit: this.size, }; if (!queryParams && this.listQueryExtra && this.listQueryExtra.length) { this.listQueryExtra.map((name) => { params[name] = ""; }); } this.$http .get(this.urls.page, { params, }) .then(({ data: res }) => { console.log("[http response] res is: ", res); // page 场景: if ("list" in res.data) { // real env: this.dataList = res.data.list.map((item) => { // if (item.parentId || item.parendName) { /** && 也行 */ // // 如果需要树形结构的列表 // return this.reConstructDataList(res.data.list) // } else { return { ...item, id: item._id ?? item.id, }; // } }); // this.dataList = res.data.records; this.totalPage = res.data.total; } else if ("records" in res.data) { // dev env: this.dataList = res.data.records.map((item) => ({ ...item, id: item._id ?? item.id, })); // this.dataList = res.data.records; this.totalPage = res.data.total; } else { this.dataList.splice(0); this.totalPage = 0; } this.tableLoading = false; }); }, /** 针对树形结构的列表,进行服务器端返回的数据重排 */ reConstructDataList(list) { // const parentIndex = list.forEach() }, /** 处理 HeadForm 的操作 */ handleHeadformOperate(payload) { // 查询,导出,导入,等等 console.log("headform operate: ", payload); }, /** 处理 表格操作 */ handleOperate({ type, data }) { console.log("payload", type, data); // 编辑、删除、跳转路由、打开弹窗(动态component)都可以在配置里加上 url // payload: { type: string, data: string | number | object } switch (type) { case "delete": { // 确认是否删除 return this.$confirm(`是否删除条目: ${data}`, "提示", { confirmButtonText: "确认", cancelButtonText: "我再想想", type: "warning", }) .then(() => { // this.$http.delete(this.urls.base + `/${data}`).then((res) => { this.$http({ url: this.urls.base, method: "DELETE", data: [`${data}`], }).then(({ data: res }) => { if (res.code === 0) { this.$message.success("删除成功!"); this.page = 1; this.size = 10; this.getList(); } }); }) .catch((err) => {}); } case "edit": { this.openDialog(data); /** data is ==> id */ break; } case "view": case "view-detail-action": { this.openDialog(data, true); break; } case "status": { // TODO: 类似于这种字符串,可以统一集中到一个文件里 const { id, code, enabled } = data; // 更改状态,更改状态需要 id 和 code 然后是 状态 enabled this.$http .put(this.urls.base, { id, code, enabled, }) .then(({ data: res }) => { if (res.code === 0) { // do nothing } }); break; } } }, handleBtnClick({ btnName, payload }) { console.log("[search] form handleBtnClick", btnName, payload); switch (btnName) { case "新增": this.openDialog(); break; case "查询": { this.getList(payload); break; } } }, /** 导航器的操作 */ handleSizeChange(val) { // val 是新值 this.page = 1; this.size = val; this.getList(); }, handlePageChange(val) { // val 是新值 this.getList(); }, /** 打开对话框 */ openDialog(row_id, detail_mode) { this.dialogVisible = true; this.$nextTick(() => { this.$refs["edit-dialog"].init(/** some args... */ row_id, detail_mode); }); }, }, }; </script> <style scoped> .list-view-with-head { background: white; /* height: 100%; */ min-height: inherit; border-radius: 6px; padding: 16px; box-shadow: 0 0 1.125px 0.125px rgba(0, 0, 0, 0.125); } </style>