|
|
|
@@ -0,0 +1,523 @@ |
|
|
|
<!-- 表格页加上搜索条件 --> |
|
|
|
<template> |
|
|
|
<div class="list-view-with-head" ref="pointer-loading-ref"> |
|
|
|
<!-- <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 |
|
|
|
v-if="navigator" |
|
|
|
class="mt-5 flex justify-end" |
|
|
|
@size-change="handleSizeChange" |
|
|
|
@current-change="handlePageChange" |
|
|
|
:current-page.sync="page" |
|
|
|
:page-size.sync="size" |
|
|
|
:page-sizes="[10, 20, 50, 100]" |
|
|
|
:total="totalPage" |
|
|
|
layout="total, sizes, prev, pager, next, jumper"></el-pagination> |
|
|
|
|
|
|
|
<DialogWithMenu |
|
|
|
ref="edit-dialog" |
|
|
|
v-if="!!dialogConfigs && dialogType === DIALOG_WITH_MENU && dialogVisible" |
|
|
|
:configs="dialogConfigs" |
|
|
|
@refreshDataList="getList" |
|
|
|
@destroy="dialogVisible = false" /> |
|
|
|
<DialogJustForm |
|
|
|
ref="edit-dialog" |
|
|
|
v-if="!!dialogConfigs && dialogType === DIALOG_JUST_FORM" |
|
|
|
:dialog-visible.sync="dialogVisible" |
|
|
|
:configs="dialogConfigs" |
|
|
|
@refreshDataList="getList" |
|
|
|
@emit-data="handleOperate" /> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import BaseListTable from "@/components/BaseListTable.vue"; |
|
|
|
import BaseSearchForm from "@/components/BaseSearchForm.vue"; |
|
|
|
import DialogWithMenu from "./DialogWithMenu.vue"; |
|
|
|
import DialogJustForm from "@/components/DialogJustForm.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, |
|
|
|
}, |
|
|
|
props: { |
|
|
|
navigator: { |
|
|
|
type: Boolean, |
|
|
|
default: true, |
|
|
|
}, |
|
|
|
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, |
|
|
|
}, |
|
|
|
triggerUpdate: { |
|
|
|
type: String, |
|
|
|
default: "", |
|
|
|
}, |
|
|
|
}, |
|
|
|
computed: { |
|
|
|
dialogType() { |
|
|
|
return this.dialogConfigs.menu ? DIALOG_WITH_MENU : DIALOG_JUST_FORM; |
|
|
|
}, |
|
|
|
}, |
|
|
|
activated() { |
|
|
|
this.refreshLayoutKey = this.layoutTable(); |
|
|
|
}, |
|
|
|
watch: { |
|
|
|
page: (val) => { |
|
|
|
console.log("page changed:", val); |
|
|
|
}, |
|
|
|
size: (val) => { |
|
|
|
console.log("size changed:", val); |
|
|
|
}, |
|
|
|
triggerUpdate(val, oldVal) { |
|
|
|
if (val && val !== oldVal) { |
|
|
|
// get list |
|
|
|
this.page = 1; |
|
|
|
this.size = "defaultPageSize" in this.tableConfig.column ? this.tableConfig.column.defaultPageSize : 20; |
|
|
|
this.getList(); |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
data() { |
|
|
|
return { |
|
|
|
DIALOG_WITH_MENU, |
|
|
|
DIALOG_JUST_FORM, |
|
|
|
DIALOG_CARPAYLOAD, |
|
|
|
dialogVisible: false, |
|
|
|
topBtnConfig: null, |
|
|
|
totalPage: 0, |
|
|
|
page: 1, |
|
|
|
size: 20, // 默认20 |
|
|
|
dataList: [], |
|
|
|
tableLoading: false, |
|
|
|
refreshLayoutKey: null, |
|
|
|
uploadDialogVisible: false, |
|
|
|
overlayVisible: false, |
|
|
|
cachedSearchCondition: {}, |
|
|
|
needAttachmentDialog: false, |
|
|
|
}; |
|
|
|
}, |
|
|
|
inject: ["urls"], |
|
|
|
mounted() { |
|
|
|
// 更新页面默认 size |
|
|
|
const size = "defaultPageSize" in this.tableConfig.column ? this.tableConfig.column.defaultPageSize : 20; |
|
|
|
this.size = size; |
|
|
|
|
|
|
|
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.cachedSearchCondition = Object.assign({}, params); |
|
|
|
} |
|
|
|
|
|
|
|
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) { |
|
|
|
// if (res.data.list.length == 0 && res.data.total != 0) { |
|
|
|
// // refresh list |
|
|
|
// if (this.page > 1) { |
|
|
|
// this.page -= 1 |
|
|
|
// this.getList() |
|
|
|
// return |
|
|
|
// } else return |
|
|
|
// } |
|
|
|
/** 破碎记录的特殊需求：数据要结合单位 material + materialUnitDictValue */ |
|
|
|
if ("attachDictValue" in this.tableConfig.column) { |
|
|
|
this.dataList = res.data.list.map((row) => { |
|
|
|
this.tableConfig.column.attachDictValue(row, "unit", "qty", "materialUnitDictValue"); |
|
|
|
return row; |
|
|
|
}); |
|
|
|
} else this.dataList = res.data.list; |
|
|
|
|
|
|
|
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 if (Array.isArray(res.data)) { |
|
|
|
this.dataList = res.data; |
|
|
|
} 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": { |
|
|
|
// 找到删除的 prompt 字段 |
|
|
|
const deleteConfig = data.head?.options?.find((item) => item.name === "delete"); |
|
|
|
let promptName = data.name ?? data.id; |
|
|
|
if (deleteConfig && "promptField" in deleteConfig) { |
|
|
|
promptName = data[deleteConfig.promptField]; |
|
|
|
} |
|
|
|
|
|
|
|
let hintMsg = `确定要删除记录 "${promptName}" 吗?`; |
|
|
|
if (promptName == data.id) { |
|
|
|
// 如果 promptName 计算出来是 data.id 就以'该记录'代称 |
|
|
|
hintMsg = "确定删除该记录?"; |
|
|
|
} |
|
|
|
|
|
|
|
let currenPageListLength = this.dataList.length; |
|
|
|
// 确认是否删除 |
|
|
|
return this.$confirm(hintMsg, "提示", { |
|
|
|
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, |
|
|
|
data: [`${data.id}`], |
|
|
|
// headers: { |
|
|
|
// "Content-Type": "application/json" |
|
|
|
// } |
|
|
|
}).then(({ data: res }) => { |
|
|
|
if (res.code === 0) { |
|
|
|
this.$message.success("删除成功!"); |
|
|
|
// this.page = 1; |
|
|
|
// this.size = |
|
|
|
// "defaultPageSize" in this.tableConfig.column ? this.tableConfig.column.defaultPageSize : 20; |
|
|
|
if (currenPageListLength == 1) this.page = this.page > 1 ? this.page - 1 : 1; |
|
|
|
|
|
|
|
this.getList(); |
|
|
|
} else { |
|
|
|
this.$message({ |
|
|
|
message: `${res.code}: ${res.msg}`, |
|
|
|
type: "error", |
|
|
|
duration: 1500, |
|
|
|
}); |
|
|
|
} |
|
|
|
}); |
|
|
|
}) |
|
|
|
.catch((err) => {}); |
|
|
|
} |
|
|
|
case "edit": { |
|
|
|
console.log("[edit] ", data); |
|
|
|
this.openDialog(data); /** data is ==> id */ |
|
|
|
break; |
|
|
|
} |
|
|
|
case "view": |
|
|
|
case "view-detail-action": { |
|
|
|
this.openDialog(data, true); |
|
|
|
break; |
|
|
|
} |
|
|
|
case "view-attachment": { |
|
|
|
this.openDialog(data, false, { key: "attachment" }); |
|
|
|
break; |
|
|
|
} |
|
|
|
case "copy": { |
|
|
|
let shouldShowOverlay = false; |
|
|
|
this.$confirm("是否复制该记录?", "提示", { |
|
|
|
confirmButtonText: "确定", |
|
|
|
cancelButtonText: "取消", |
|
|
|
type: "warning", |
|
|
|
}) |
|
|
|
.then(() => { |
|
|
|
// |
|
|
|
let payload = ""; |
|
|
|
console.log("copying...", type, data); |
|
|
|
if (typeof data === "object") { |
|
|
|
const head = data.head; |
|
|
|
const copyOpt = |
|
|
|
("options" in head && |
|
|
|
Array.isArray(head.options) && |
|
|
|
head.options.find((item) => item.name === "copy")) || |
|
|
|
null; |
|
|
|
if (copyOpt && "showOverlay" in copyOpt && copyOpt.showOverlay) { |
|
|
|
this.overlayVisible = true; |
|
|
|
shouldShowOverlay = true; |
|
|
|
payload = data.id; |
|
|
|
} |
|
|
|
} else payload = data; |
|
|
|
|
|
|
|
return this.$http.post(this.urls.copyUrl, payload, { |
|
|
|
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, |
|
|
|
}); |
|
|
|
} |
|
|
|
if (shouldShowOverlay) this.overlayVisible = false; |
|
|
|
}) |
|
|
|
.catch((errMsg) => { |
|
|
|
errMsg !== "cancel" && |
|
|
|
this.$message({ |
|
|
|
message: errMsg, |
|
|
|
type: "error", |
|
|
|
duration: 1500, |
|
|
|
}); |
|
|
|
if (shouldShowOverlay) this.overlayVisible = false; |
|
|
|
}); |
|
|
|
break; |
|
|
|
} |
|
|
|
|
|
|
|
case "sync": { |
|
|
|
let shouldShowOverlay = false; |
|
|
|
let payload = ""; |
|
|
|
console.log("sync...", type, data); |
|
|
|
if (typeof data === "object") { |
|
|
|
const head = data.head; |
|
|
|
const syncOpt = |
|
|
|
("options" in head && Array.isArray(head.options) && head.options.find((item) => item.name === "sync")) || |
|
|
|
null; |
|
|
|
if (syncOpt && "showOverlay" in syncOpt && syncOpt.showOverlay) { |
|
|
|
this.overlayVisible = true; |
|
|
|
shouldShowOverlay = true; |
|
|
|
payload = data.id; |
|
|
|
} |
|
|
|
} else payload = data; |
|
|
|
|
|
|
|
this.$message({ |
|
|
|
message: "正在发起同步...", |
|
|
|
type: "success", |
|
|
|
}); |
|
|
|
|
|
|
|
// 同步单个料仓数据 |
|
|
|
this.$http |
|
|
|
.post(this.urls.syncSingleUrl, payload, { |
|
|
|
headers: { |
|
|
|
"Content-Type": "application/json", |
|
|
|
}, |
|
|
|
}) |
|
|
|
.then(({ data: res }) => { |
|
|
|
this.$message({ |
|
|
|
message: res.msg, |
|
|
|
type: res.code === 0 ? "success" : "error", |
|
|
|
}); |
|
|
|
this.getList(); |
|
|
|
if (shouldShowOverlay) this.overlayVisible = false; |
|
|
|
}); |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
handleBtnClick({ btnName, payload }) { |
|
|
|
console.log("[search] form handleBtnClick", btnName, payload); |
|
|
|
switch (btnName) { |
|
|
|
case "新增": |
|
|
|
this.openDialog(); |
|
|
|
break; |
|
|
|
case "导入": |
|
|
|
this.openUploadDialog(); |
|
|
|
break; |
|
|
|
case "手动添加": { |
|
|
|
this.openDialog(); |
|
|
|
return; |
|
|
|
} |
|
|
|
case "查询": { |
|
|
|
if (typeof payload === "object") { |
|
|
|
// BaseSearchForm 给这个组件传递了数据 |
|
|
|
Object.assign(this.cachedSearchCondition, payload); |
|
|
|
if ("timerange" in payload) { |
|
|
|
if (!!payload.timerange) { |
|
|
|
const [startTime, endTime] = payload["timerange"]; |
|
|
|
this.cachedSearchCondition.startTime = moment(startTime).format("YYYY-MM-DDTHH:mm:ss"); |
|
|
|
this.cachedSearchCondition.endTime = moment(endTime).format("YYYY-MM-DDTHH:mm:ss"); |
|
|
|
} else { |
|
|
|
delete this.cachedSearchCondition.startTime; |
|
|
|
delete this.cachedSearchCondition.endTime; |
|
|
|
} |
|
|
|
delete this.cachedSearchCondition.timerange; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
/** 处理 listQueryExtra 里的数据 */ |
|
|
|
this.listQueryExtra?.map((cond) => { |
|
|
|
if (typeof cond === "string") { |
|
|
|
if (!!payload[cond]) { |
|
|
|
this.cachedSearchCondition[cond] = payload[cond]; |
|
|
|
} else { |
|
|
|
this.cachedSearchCondition[cond] = ""; |
|
|
|
} |
|
|
|
} else if (typeof cond === "object") { |
|
|
|
Object.keys(cond).forEach((key) => { |
|
|
|
this.cachedSearchCondition[key] = cond[key]; |
|
|
|
}); |
|
|
|
} |
|
|
|
}); |
|
|
|
console.log("查询", this.cachedSearchCondition); |
|
|
|
this.getList(this.cachedSearchCondition); |
|
|
|
break; |
|
|
|
} |
|
|
|
case "同步": |
|
|
|
case "全部同步": |
|
|
|
this.$http.post(this.urls.syncUrl).then(({ data: res }) => { |
|
|
|
console.log("同步", res); |
|
|
|
this.$message({ message: res.msg, type: res.code === 0 ? "success" : "error" }); |
|
|
|
this.getList(); |
|
|
|
}); |
|
|
|
break; |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
/** 导航器的操作 */ |
|
|
|
handleSizeChange(val) { |
|
|
|
// val 是新值 |
|
|
|
this.page = 1; |
|
|
|
this.size = val; |
|
|
|
this.getList(this.cachedSearchCondition); |
|
|
|
}, |
|
|
|
|
|
|
|
handlePageChange(val) { |
|
|
|
// val 是新值 |
|
|
|
this.getList(this.cachedSearchCondition); |
|
|
|
}, |
|
|
|
|
|
|
|
/** 打开对话框 */ |
|
|
|
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); |
|
|
|
}); |
|
|
|
}, |
|
|
|
|
|
|
|
openUploadDialog() { |
|
|
|
this.uploadDialogVisible = true; |
|
|
|
|
|
|
|
this.$nextTick(() => { |
|
|
|
this.$refs["upload-dialog"].init(); |
|
|
|
}); |
|
|
|
}, |
|
|
|
}, |
|
|
|
}; |
|
|
|
</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> |
