pms-aomei/src/views/atomViews/ListViewWithHead.vue

<!-- 表格页加上搜索条件 -->
<template>
	<div
		class="list-view-with-head"
	>
		<!-- <head-form :form-config="headFormConfig" @headBtnClick="btnClick" /> -->
		<BaseSearchForm :head-config="headConfig" @btn-click="handleBtnClick" />

		<BaseListTable
			: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" -->

		<base-dialog
			ref="edit-dialog"
			v-if="dialogVisible"
			:configs="dialogConfigs"
			@refreshDataList="getList"
		/>
	</div>
</template>

<script>
import BaseListTable from "@/components/BaseListTable.vue";
import BaseSearchForm from "@/components/BaseSearchForm.vue";
import BaseDialog from "@/components/DialogWithMenu.vue";

export default {
	name: "ListViewWithHead",
	components: { BaseSearchForm, BaseListTable, BaseDialog },
	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: () => ({}),
		},
	},
	data() {
		return {
			dialogVisible: false,
			topBtnConfig: null,
			totalPage: 100,
			page: 1,
			size: 20, // 默认20
			dataList: [],
		};
	},
	inject: ["urls"],
	mounted() {
		this.initDataWhenLoad && this.getList();
	},
	methods: {
		/**
		 * 转换服务器数据的中间层
		 * 为了抹平真实服务器数据和我本地的测试服务器数据的差异
		 **/
		prehandle_data(list) {
			/** 根据具体情况修改 */
			list.forEach((data) => {
				data.id = data._id;
				delete data._id;
			});
			return list;
		},

		/** 获取 列表数据 */
		getList(listQuery = null) {
			if (!listQuery) {
				listQuery = {};
				listQuery.page = this.page;
				listQuery.size = this.size;
			}

			console.log("[before http] url: ", this.urls);

			const params = {
				page: listQuery.page,
				limit: listQuery.size,
			};
			if (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) => ({
							...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;
					}
				});
		},

		/** 处理 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-detail-action":
					this.openDialog(data, true);
					break;
			}
		},

		handleBtnClick({ btnName, payload }) {
			console.log("[search] form handleBtnClick", btnName, payload);
			switch (btnName) {
				case "新增":
					this.openDialog();
					break;
				case "查询":
					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 .125px rgba(0, 0, 0, 0.125);
}
</style>