|
|
|
@@ -0,0 +1,540 @@ |
|
|
|
<!-- 表格页加上搜索条件 --> |
|
|
|
<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> |
|
|
|
|
|
|
|
<DialogJustForm |
|
|
|
ref="edit-dialog" |
|
|
|
key="edit-dialog" |
|
|
|
v-if="!!dialogConfigs" |
|
|
|
:dialog-visible.sync="dialogVisible" |
|
|
|
:configs="dialogConfigs" |
|
|
|
@refreshDataList="getList" |
|
|
|
/> |
|
|
|
<DialogJustForm |
|
|
|
ref="car-payload-add-dialog" |
|
|
|
key="car-payload-add-dialog" |
|
|
|
v-if="!!carPayloadAddConfigs" |
|
|
|
:dialog-visible.sync="carPayloadAddVisible" |
|
|
|
:configs="carPayloadAddConfigs" |
|
|
|
@refreshDataList="getList" |
|
|
|
/> |
|
|
|
<DialogCarPayload |
|
|
|
ref="car-payload-dialog" |
|
|
|
key="car-payload-dialog" |
|
|
|
v-if="!!carPayloadDialogConfigs" |
|
|
|
:dialog-visible.sync="carPayloadDialogVisible" |
|
|
|
:configs="carPayloadDialogConfigs" |
|
|
|
@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"; |
|
|
|
import DialogCarPayload from "@/components/DialogCarPayload.vue"; |
|
|
|
import moment from "moment"; |
|
|
|
|
|
|
|
const DIALOG_WITH_MENU = "DialogWithMenu"; |
|
|
|
const DIALOG_JUST_FORM = "DialogJustForm"; |
|
|
|
const DIALOG_CARPAYLOAD = "DialogCarPayload"; |
|
|
|
|
|
|
|
export default { |
|
|
|
name: "ListViewWithHead", |
|
|
|
components: { BaseSearchForm, BaseListTable, DialogWithMenu, DialogJustForm, DialogCarPayload }, |
|
|
|
props: { |
|
|
|
tableConfig: { |
|
|
|
type: Object, |
|
|
|
default: () => ({ |
|
|
|
/** 列配置, 即 props **/ column: [], |
|
|
|
/** 表格整体配置 */ table: undefined, |
|
|
|
}), |
|
|
|
}, |
|
|
|
headConfig: { |
|
|
|
type: Object, |
|
|
|
default: () => ({}), |
|
|
|
}, |
|
|
|
/** 请求page接口的时候有些字段是必填的，没有会报500，把相关字段名传入这个prop: */ |
|
|
|
listQueryExtra: { |
|
|
|
type: Array, |
|
|
|
default: () => ["key"], |
|
|
|
}, |
|
|
|
attachListQueryExtra: { |
|
|
|
// 新增时，附带 listQueryExtra 里的哪些键和对应值 |
|
|
|
type: String, |
|
|
|
default: "", |
|
|
|
}, |
|
|
|
initDataWhenLoad: { type: Boolean, default: true }, |
|
|
|
/** dialog configs 或许可以从 tableConfig 计算出来 computed... */ |
|
|
|
dialogConfigs: { |
|
|
|
type: Object, |
|
|
|
default: () => null, |
|
|
|
}, |
|
|
|
carPayloadDialogConfigs: { |
|
|
|
type: Object, |
|
|
|
default: () => null, |
|
|
|
}, |
|
|
|
carPayloadAddConfigs: { |
|
|
|
type: Object, |
|
|
|
default: () => null, |
|
|
|
}, |
|
|
|
triggerUpdate: { |
|
|
|
type: String, |
|
|
|
default: "", |
|
|
|
}, |
|
|
|
}, |
|
|
|
computed: { |
|
|
|
dialogType() { |
|
|
|
return this.dialogConfigs.menu ? DIALOG_WITH_MENU : DIALOG_JUST_FORM; |
|
|
|
}, |
|
|
|
}, |
|
|
|
activated() { |
|
|
|
console.log("list view with ehad activated..........", this.triggerUpdate); |
|
|
|
this.refreshLayoutKey = this.layoutTable(); |
|
|
|
}, |
|
|
|
watch: { |
|
|
|
triggerUpdate(val, oldVal) { |
|
|
|
if (val && val !== oldVal) { |
|
|
|
// get list |
|
|
|
this.page = 1; |
|
|
|
this.size = 20; |
|
|
|
this.getList(); |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
data() { |
|
|
|
return { |
|
|
|
DIALOG_WITH_MENU, |
|
|
|
DIALOG_JUST_FORM, |
|
|
|
DIALOG_CARPAYLOAD, |
|
|
|
dialogVisible: false, |
|
|
|
carPayloadDialogVisible: false, |
|
|
|
carPayloadAddVisible: 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]; |
|
|
|
}); |
|
|
|
} |
|
|
|
}); |
|
|
|
} |
|
|
|
|
|
|
|
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); |
|
|
|
|
|
|
|
if (res.code === 0) { |
|
|
|
// page 场景: |
|
|
|
if ("list" in res.data) { |
|
|
|
this.dataList = res.data.list; |
|
|
|
this.totalPage = res.data.total; |
|
|
|
} else if (Array.isArray(res.data)) { |
|
|
|
this.dataList = res.data |
|
|
|
this.totalPage = null; |
|
|
|
} else { |
|
|
|
this.dataList.splice(0); |
|
|
|
this.totalPage = 0; |
|
|
|
} |
|
|
|
} else { |
|
|
|
this.$message({ |
|
|
|
message: `${res.code}: ${res.msg}`, |
|
|
|
type: "error", |
|
|
|
duration: 2000, |
|
|
|
}); |
|
|
|
} |
|
|
|
this.tableLoading = false; |
|
|
|
}) |
|
|
|
.catch((err) => { |
|
|
|
this.$message({ |
|
|
|
message: `${err}`, |
|
|
|
type: "error", |
|
|
|
duration: 2000, |
|
|
|
}); |
|
|
|
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 ?? data.id}" 吗?`, "提示", { |
|
|
|
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(); |
|
|
|
} else { |
|
|
|
this.$message({ |
|
|
|
message: `${res.code}: ${res.msg}`, |
|
|
|
type: "error", |
|
|
|
duration: 1500, |
|
|
|
}); |
|
|
|
} |
|
|
|
}); |
|
|
|
}) |
|
|
|
.catch((err) => {}); |
|
|
|
} |
|
|
|
case "edit": { |
|
|
|
this.openDialog(data); /** data is ==> id */ |
|
|
|
break; |
|
|
|
} |
|
|
|
case "view": |
|
|
|
case "view-detail-action": { |
|
|
|
this.openDialog(data, true); |
|
|
|
break; |
|
|
|
} |
|
|
|
// case "view-blender-batch-details": { |
|
|
|
// this.$router.push({ |
|
|
|
// name: "pms-blenderBatchDetails", |
|
|
|
// query: { |
|
|
|
// batchId: data, |
|
|
|
// }, |
|
|
|
// }); |
|
|
|
// 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, true, { key: "attr" }); |
|
|
|
// break; |
|
|
|
// } |
|
|
|
// case "to-bom-detail": { |
|
|
|
// // console.log('to-bom-detail', data.name) |
|
|
|
// // 查看配方详情 |
|
|
|
// return this.$router.push({ |
|
|
|
// name: "pms-bomDetails", |
|
|
|
// query: { |
|
|
|
// name: data.name, |
|
|
|
// }, |
|
|
|
// }); |
|
|
|
// } |
|
|
|
// 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, |
|
|
|
// }); |
|
|
|
// }); |
|
|
|
// } |
|
|
|
// case "change-category": { |
|
|
|
// return this.$http.put(this.urls.base, data).then(({ data: res }) => { |
|
|
|
// if (res.code === 0) { |
|
|
|
// this.$message({ |
|
|
|
// message: "修改成功", |
|
|
|
// type: "success", |
|
|
|
// duration: 1500, |
|
|
|
// onClose: () => { |
|
|
|
// this.getList(); |
|
|
|
// }, |
|
|
|
// }); |
|
|
|
// } else { |
|
|
|
// this.$message({ |
|
|
|
// message: `${res.code}: ${res.msg}`, |
|
|
|
// type: "error", |
|
|
|
// duration: 1500, |
|
|
|
// }); |
|
|
|
// } |
|
|
|
// }); |
|
|
|
// } |
|
|
|
// case "preview": { |
|
|
|
// console.log("[PREVIEW] data", data); |
|
|
|
// // report preview |
|
|
|
// return this.$router.push({ |
|
|
|
// name: "pms-reportPreview", |
|
|
|
// query: { |
|
|
|
// name: data.name, |
|
|
|
// }, |
|
|
|
// }); |
|
|
|
// } |
|
|
|
// case "design": { |
|
|
|
// console.log("[DESIGN] data", data); |
|
|
|
// // report design |
|
|
|
// return this.$router.push({ |
|
|
|
// name: "pms-reportDesign", |
|
|
|
// query: { |
|
|
|
// name: data.name, |
|
|
|
// }, |
|
|
|
// }); |
|
|
|
// } |
|
|
|
// case "detach": { |
|
|
|
// return this.$http |
|
|
|
// .post(this.urls.detach, data /* { id: data } */, { headers: { "Content-Type": "application/json" } }) |
|
|
|
// .then(({ data: res }) => { |
|
|
|
// if (res.code === 0) { |
|
|
|
// this.$message({ |
|
|
|
// message: "下发成功", |
|
|
|
// type: "success", |
|
|
|
// duration: 1500, |
|
|
|
// onClose: () => { |
|
|
|
// this.getList(); |
|
|
|
// }, |
|
|
|
// }); |
|
|
|
// } else { |
|
|
|
// this.$message({ |
|
|
|
// message: `${res.code}: ${res.msg}`, |
|
|
|
// type: "error", |
|
|
|
// duration: 1500, |
|
|
|
// }); |
|
|
|
// } |
|
|
|
// }); |
|
|
|
// } |
|
|
|
case "to-car-history": { |
|
|
|
return this.$router.push({ |
|
|
|
name: "pms-carHistory", |
|
|
|
query: { |
|
|
|
code: data.code, |
|
|
|
}, |
|
|
|
}); |
|
|
|
} |
|
|
|
case "to-car-payload": { |
|
|
|
// open dialog instead of redirect to a new page |
|
|
|
this.openCarPayloadDialog(data); |
|
|
|
break; |
|
|
|
} |
|
|
|
case "edit-payload": { |
|
|
|
this.openCarPayloadAddDialog(data); |
|
|
|
break; |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
openCarPayloadDialog(id) { |
|
|
|
this.carPayloadDialogVisible = true; |
|
|
|
this.$nextTick(() => { |
|
|
|
this.$refs["car-payload-dialog"].init(id); |
|
|
|
}); |
|
|
|
}, |
|
|
|
|
|
|
|
openCarPayloadAddDialog(id) { |
|
|
|
this.carPayloadAddVisible = true; |
|
|
|
this.$nextTick(() => { |
|
|
|
this.$refs["car-payload-add-dialog"].init(null, null, null, { hisId: id }); |
|
|
|
}); |
|
|
|
}, |
|
|
|
|
|
|
|
handleBtnClick({ btnName, payload }) { |
|
|
|
console.log("[search] form handleBtnClick", btnName, payload); |
|
|
|
switch (btnName) { |
|
|
|
case "新增": |
|
|
|
this.openDialog(); |
|
|
|
break; |
|
|
|
|
|
|
|
case "手动添加": { |
|
|
|
this.openDialog(); |
|
|
|
return; |
|
|
|
} |
|
|
|
|
|
|
|
case "查询": { |
|
|
|
const params = {}; |
|
|
|
if (typeof payload === "object") { |
|
|
|
// BaseSearchForm 给这个组件传递了数据 |
|
|
|
Object.assign(params, payload); |
|
|
|
if ("timerange" in params) { |
|
|
|
if (!!params.timerange) { |
|
|
|
const [startTime, endTime] = params["timerange"]; |
|
|
|
params.startTime = moment(startTime).format("YYYY-MM-DDTHH:mm:ss"); |
|
|
|
params.endTime = moment(endTime).format("YYYY-MM-DDTHH:mm:ss"); |
|
|
|
} |
|
|
|
delete params.timerange; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
/** 处理 listQueryExtra 里的数据 */ |
|
|
|
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; |
|
|
|
let extraParams = null; |
|
|
|
if (this.attachListQueryExtra && this.listQueryExtra.length) { |
|
|
|
this.listQueryExtra.forEach((item) => { |
|
|
|
let found = item[this.attachListQueryExtra]; |
|
|
|
if (found !== null && found !== undefined) extraParams = item; |
|
|
|
}); |
|
|
|
} |
|
|
|
this.$nextTick(() => { |
|
|
|
console.log(`[edit-dialog] extraParams: ${extraParams}`); |
|
|
|
this.$refs["edit-dialog"].init(/** some args... */ row_id, detail_mode, tag_info, extraParams); |
|
|
|
}); |
|
|
|
}, |
|
|
|
}, |
|
|
|
}; |
|
|
|
</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> |
