init commit & 混料程序模块
This commit is contained in:
229
src/views/atomViews/ListViewWithHead.vue
Normal file
229
src/views/atomViews/ListViewWithHead.vue
Normal file
@@ -0,0 +1,229 @@
|
||||
<!-- 表格页加上搜索条件 -->
|
||||
<template>
|
||||
<div class="bg-white rounded-lg shadow-lg w-full h-full p-5">
|
||||
<!-- <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></style>
|
||||
Reference in New Issue
Block a user