<!-- 表格页加上搜索条件 --> <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" :current-page="page" :current-size="size" :refresh-layout-key="refreshLayoutKey" /> <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; }, }, activated() { console.log("list view with ehad activated.........."); this.refreshLayoutKey = this.layoutTable(); }, data() { return { DIALOG_WITH_MENU, DIALOG_JUST_FORM, dialogVisible: false, topBtnConfig: null, totalPage: 100, page: 1, size: 20, // 默认20 dataList: [], tableLoading: false, refreshLayoutKey: null, }; }, inject: ["urls"], mounted() { this.initDataWhenLoad && this.getList(); }, methods: { /** 获取 列表数据 */ 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((nameOrObj) => { if (typeof nameOrObj === "string") params[nameOrObj] = ""; else if (typeof nameOrObj === "object") { Object.keys(nameOrObj).forEach((key) => { params[key] = nameOrObj[key]; }); } }); } // if (this.urls.pageIsPostApi) { // } else { // 默认是 get 方式请求 page this.$http[this.urls.pageIsPostApi ? "post" : "get"]( this.urls.page, this.urls.pageIsPostApi ? { ...params, } : { 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) => { return { ...item, id: item._id ?? item.id, }; // } }); this.totalPage = res.data.total; } else if ("records" in res.data) { this.dataList = res.data.records.map((item) => ({ ...item, id: item._id ?? item.id, })); this.totalPage = res.data.total; } else { this.dataList.splice(0); this.totalPage = 0; } this.tableLoading = false; }); // } }, layoutTable() { return Math.random(); }, /** 处理 表格操作 */ 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.name}" 吗?`, "提示", { confirmButtonText: "确认", cancelButtonText: "我再想想", type: "warning", }) .then(() => { // this.$http.delete(this.urls.base + `/${data}`).then((res) => { this.$http({ url: this.urls.base, method: "DELETE", data: [`${data.id}`], }).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": { console.log("status", data); // TODO: 类似于这种字符串,可以统一集中到一个文件里 const { id, code } = data; const queryCondition = { id, code }; if ("enabled" in data) queryCondition.enabled = data["enabled"]; if ("status" in data) queryCondition.status = data["status"]; // 更改状态,更改状态需要 id 和 code 然后是 状态 enabled this.$http.put(this.urls.base, queryCondition).then(({ data: res }) => { if (res.code === 0) { // do nothing } else { this.$message({ message: `${res.code}: ${res.msg}`, type: "error", duration: 1500, }); } }); break; } case "view-attachment": { this.openDialog(data, false, { key: "attachment" }); break; } case "view-recipe": { this.openDialog(data, false, { key: "attr" }); break; } case "copy": { return this.$http .post(this.urls.copyUrl, data, { headers: { "Content-Type": "application/json", }, }) .then(({ data: res }) => { if (res.code === 0) { this.$message({ message: "复制成功!", type: "success", duration: 1500, }); this.getList(); } else { this.$message({ message: `${res.code}: ${res.msg}`, type: "error", duration: 1500, }); } }) .catch((errMsg) => { this.$message({ message: errMsg, type: "error", duration: 1500, }); }); } } }, handleBtnClick({ btnName, payload }) { console.log("[search] form handleBtnClick", btnName, payload); switch (btnName) { case "新增": this.openDialog(); break; case "查询": { const params = {}; this.listQueryExtra?.map((cond) => { if (typeof cond === "string") { if (!!payload[cond]) { params[cond] = payload[cond]; } else { params[cond] = ""; } } else if (typeof cond === "object") { Object.keys(cond).forEach((key) => { params[key] = cond[key]; }); } }); console.log("查询", params); this.getList(params); break; } case "同步": this.$http.post(this.urls.syncUrl).then(({ data: res }) => { if (res.code === 0) { this.getList(); } }); break; } }, /** 导航器的操作 */ handleSizeChange(val) { // val 是新值 this.page = 1; this.size = val; this.getList(); }, handlePageChange(val) { // val 是新值 this.getList(); }, /** 打开对话框 */ openDialog(row_id, detail_mode, tag_info) { this.dialogVisible = true; this.$nextTick(() => { this.$refs["edit-dialog"].init(/** some args... */ row_id, detail_mode, tag_info); }); }, }, }; </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>