|
|
|
@@ -1,10 +1,33 @@ |
|
|
|
<template> |
|
|
|
<ListViewWithHead |
|
|
|
<!-- <ListViewWithHead |
|
|
|
:table-config="tableConfig" |
|
|
|
:head-config="headFormConfigs" |
|
|
|
:dialog-configs="dialogConfigs" |
|
|
|
:list-query-extra="['key', 'tech']" /> |
|
|
|
:list-query-extra="['key', 'tech']" /> --> |
|
|
|
<!-- :list-query-extra="['key', 'bom', { wsId: 3 }]" --> |
|
|
|
<div class="list-view-with-head" ref="pointer-loading-ref"> |
|
|
|
<BaseSearchForm :head-config="headFormConfigs" @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-size.sync="size" |
|
|
|
:page-sizes="[10, 20, 50, 100]" |
|
|
|
:total="totalPage" |
|
|
|
layout="total, sizes, prev, pager, next, jumper"></el-pagination> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
@@ -26,12 +49,204 @@ export default { |
|
|
|
headFormConfigs, |
|
|
|
allUrls: urls, |
|
|
|
dialogConfigs, |
|
|
|
dataList: [], |
|
|
|
page: 1, |
|
|
|
size: 20, |
|
|
|
totalPage: 0, |
|
|
|
tableLoading: false, |
|
|
|
}; |
|
|
|
}, |
|
|
|
created() {}, |
|
|
|
mounted() {}, |
|
|
|
methods: {}, |
|
|
|
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(); |
|
|
|
}, |
|
|
|
|
|
|
|
handleBtnClick({ btnName, payload }) { |
|
|
|
console.log("[search] form handleBtnClick", btnName, payload); |
|
|
|
switch (btnName) { |
|
|
|
case "新增": |
|
|
|
this.openDialog(); |
|
|
|
break; |
|
|
|
case "导入": |
|
|
|
this.openUploadDialog(); |
|
|
|
break; |
|
|
|
case "手动添加": { |
|
|
|
this.openDialog(); |
|
|
|
return; |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
handleOperate({ type, data }) { |
|
|
|
console.log("payload", type, data); |
|
|
|
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({ |
|
|
|
url: this.urls.base, |
|
|
|
method: "DELETE", |
|
|
|
data: [`${data.id}`], |
|
|
|
}).then(({ data: res }) => { |
|
|
|
if (res.code === 0) { |
|
|
|
this.$message.success("删除成功!"); |
|
|
|
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; |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
handleSizeChange(val) { |
|
|
|
// val 是新值 |
|
|
|
this.page = 1; |
|
|
|
this.size = val; |
|
|
|
this.getList(this.cachedSearchCondition); |
|
|
|
}, |
|
|
|
|
|
|
|
handlePageChange(val) { |
|
|
|
// val 是新值 |
|
|
|
this.getList(this.cachedSearchCondition); |
|
|
|
}, |
|
|
|
}, |
|
|
|
}; |
|
|
|
</script> |
|
|
|
|
|
|
|
<style scoped></style> |
|
|
|
<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> |
