This commit is contained in:
lb
2023-02-17 14:02:03 +08:00
parent c2657b190e
commit efb9d3f46e
23 changed files with 442 additions and 413 deletions

View File

@@ -1,82 +1,76 @@
<!-- 这里单纯的配置表格就好了-->
<template>
<div class="base-list-table w-full">
<el-table
:data="tableData"
v-bind="tableConfig"
ref="base-list-table"
:cell-style="{ padding: 0 }"
:header-cell-style="/** 重写表格样式 **/ {
padding: '8px 0',
}"
row-key="id"
:lazy="true"
:load="loadSubClassFn"
>
<!-- @cell-mouse-enter="(row, col, cell, event) => $emit('cell-mouse-enter', row, col, cell, event)"> -->
<!-- @cell-mouse-leave="(row, col, cell, event) => $emit('cell-mouse-leave', row, col, cell, event)"> -->
<!-- 表格头定义 -->
<template v-for="(head, idx) in columnConfig">
<!-- 索引列 -->
<el-table-column
:key="idx"
v-if="head.type"
:type="head.type"
:label="head.label || head.name || ''"
:header-align="head.align || 'center'"
:align="head.align || 'center'"
:width="head.width || 50"
:index="
head.type === 'index'
? (val) => {
return val + 1 + (page - 1) * size;
}
: null
"
v-bind="head.more"
></el-table-column>
<!-- 普通的表头 -->
<el-table-column
v-else
:key="idx + 'else'"
:label="head.label ? head.label : head.name"
:prop="head.prop || null"
:width="head.width || null"
:min-width="head.minWidth || null"
:fixed="head.fixed || null"
:show-overflow-tooltip="head.showOverflowTooltip || true"
:tooltip-effect="head.tooltipEffect || 'light'"
filter-placement="top"
:align="head.align || null"
v-bind="head.more"
>
<!-- 子组件 -->
<template v-if="head.prop" slot-scope="scope">
<component
v-if="head.subcomponent"
:is="head.subcomponent"
:key="idx + 'sub'"
:inject-data="{ ...scope.row, head }"
@emit-data="handleSubEmitData"
/>
<!-- 直接展示数据或应用过滤器 -->
<span v-else>{{
scope.row[head.prop] | commonFilter(head.filter)
}}</span>
</template>
<div class="base-list-table w-full">
<el-table
:data="tableData"
v-bind="tableConfig"
ref="base-list-table"
:cell-style="{ padding: 0 }"
:header-cell-style="/** 重写表格样式 **/ {
padding: '8px 0',
}"
row-key="id"
:lazy="true"
:load="loadSubClassFn"
>
<!-- @cell-mouse-enter="(row, col, cell, event) => $emit('cell-mouse-enter', row, col, cell, event)"> -->
<!-- @cell-mouse-leave="(row, col, cell, event) => $emit('cell-mouse-leave', row, col, cell, event)"> -->
<!-- 表格头定义 -->
<template v-for="(head, idx) in columnConfig">
<!-- 索引列 -->
<el-table-column
:key="idx"
v-if="head.type"
:type="head.type"
:label="head.label || head.name || ''"
:header-align="head.align || 'center'"
:align="head.align || 'center'"
:width="head.width || 50"
:index="
head.type === 'index'
? (val) => {
return val + 1 + (page - 1) * size;
}
: null
"
v-bind="head.more"
></el-table-column>
<!-- 普通的表头 -->
<el-table-column
v-else
:key="idx + 'else'"
:label="head.label ? head.label : head.name"
:prop="head.prop || null"
:width="head.width || null"
:min-width="head.minWidth || null"
:fixed="head.fixed || null"
:show-overflow-tooltip="head.showOverflowTooltip || true"
:tooltip-effect="head.tooltipEffect || 'light'"
filter-placement="top"
:align="head.align || null"
v-bind="head.more"
>
<!-- 子组件 -->
<template v-if="head.prop" slot-scope="scope">
<component
v-if="head.subcomponent"
:is="head.subcomponent"
:key="idx + 'sub'"
:inject-data="{ ...scope.row, head }"
@emit-data="handleSubEmitData"
/>
<!-- 直接展示数据或应用过滤器 -->
<span v-else>{{ scope.row[head.prop] | commonFilter(head.filter) }}</span>
</template>
<!-- 多级表头 -->
<template v-if="!head.prop && head.children">
<TableHead
v-for="(subhead, subindex) in head.children"
:key="'subhead-' + idx + '-subindex-' + subindex"
:opt="subhead"
/>
</template>
</el-table-column>
</template>
</el-table>
</div>
<!-- 多级表头 -->
<template v-if="!head.prop && head.children">
<TableHead v-for="(subhead, subindex) in head.children" :key="'subhead-' + idx + '-subindex-' + subindex" :opt="subhead" />
</template>
</el-table-column>
</template>
</el-table>
</div>
</template>
<script>
@@ -86,52 +80,53 @@ import TableHead from "@/components/TableHead.vue";
// 3. more...
export default {
name: "BaseListTable",
components: { TableHead },
filters: {
commonFilter: (source, filterType = (a) => a) => {
return filterType(source);
},
},
props: {
tableConfig: {
type: Object,
default: () => ({}),
},
columnConfig: {
type: Array,
default: () => [],
},
tableData: {
type: Array,
default: () => [],
},
},
inject: ["urls"],
data() {
return {
page: 1,
size: 20, // 默认20
dataList: [],
};
},
watch: {
// 'props.tableData': {
// handler: () => {
// this.$refs['base-list-table'].doLayout();
// },
// immediate: true,
// },
},
methods: {
handleSubEmitData(payload) {
console.log("[component] BaseListTable handleSubEmitData(): ", payload);
this.$emit("operate-event", payload);
},
loadSubClassFn(tree, treeNode, resolve) {
this.$emit('load-sub', { tree, treeNode, resolve })
}
},
name: "BaseListTable",
components: { TableHead },
filters: {
commonFilter: (source, filterType = (a) => a) => {
return filterType(source);
},
},
props: {
tableConfig: {
type: Object,
default: () => ({}),
},
columnConfig: {
type: Array,
default: () => [],
},
tableData: {
type: Array,
default: () => [],
},
refreshLayoutKey: {
type: Number,
default: 0,
},
},
inject: ["urls"],
data() {
return {
page: 1,
size: 20, // 默认20
dataList: [],
};
},
watch: {
refreshLayoutKey(val) {
this.$refs["base-list-table"].doLayout();
},
},
methods: {
handleSubEmitData(payload) {
console.log("[component] BaseListTable handleSubEmitData(): ", payload);
this.$emit("operate-event", payload);
},
loadSubClassFn(tree, treeNode, resolve) {
this.$emit("load-sub", { tree, treeNode, resolve });
},
},
};
</script>

View File

@@ -197,13 +197,17 @@ export default {
})
.then(({ data: res }) => {
console.log("[add&update] res is: ", res);
this.loadingStatus = false;
if (res.code === 0) {
this.$message.success(payload.name === "add" ? "添加成功" : "更新成功");
this.loadingStatus = false;
this.$emit("refreshDataList");
this.handleClose();
} else {
this.$message.error(res.msg);
this.$message({
message: `${res.code}: ${res.msg}`,
type: "error",
duration: 2000,
});
}
})
.catch((errMsg) => {

View File

@@ -16,6 +16,7 @@
:table-data="dataList"
@operate-event="handleOperate"
@load-sub="handleLoadSub"
:refresh-layout-key="refreshLayoutKey"
/>
<el-pagination
@@ -91,6 +92,7 @@ export default {
},
data() {
return {
refreshLayoutKey: null,
DIALOG_WITH_MENU,
DIALOG_JUST_FORM,
dialogVisible: false,
@@ -109,7 +111,7 @@ export default {
input: true,
label: "物料名称",
prop: "name",
rules: { required: true, message: "not empty", trigger: "blur" },
rules: { required: true, message: "必填项不能为空", trigger: "blur" },
elparams: { placeholder: "请输入物料名称" },
},
],
@@ -118,7 +120,7 @@ export default {
input: true,
label: "物料编码",
prop: "code",
rules: { required: true, message: "not empty", trigger: "blur" },
rules: { required: true, message: "必填项不能为空", trigger: "blur" },
elparams: { placeholder: "请输入物料编码" },
},
],
@@ -140,6 +142,9 @@ export default {
mounted() {
this.initDataWhenLoad && this.getList();
},
activated() {
this.refreshLayoutKey = this.layoutTable();
},
methods: {
handleLoadSub({ tree, treeNode, resolve }) {
// console.log("tree, treeNOde, resovle is:", tree, treeNode, resolve);
@@ -158,6 +163,10 @@ export default {
});
},
layoutTable() {
return Math.random();
},
/** 获取 列表数据 */
getList(queryParams) {
this.tableLoading = true;
@@ -188,7 +197,7 @@ export default {
// page 场景:
if ("list" in res.data) {
// real env:
this.dataList = res.data.list.map((_) => ({ ..._, hasChildren: true }));
this.dataList = res.data.list.map((_) => ({ ..._, hasChildren: Array.isArray(_.children) && _.children.length > 0 ? true : false }));
// this.dataList = res.data.records;
this.totalPage = res.data.total;
@@ -202,12 +211,6 @@ export default {
});
},
/** 处理 HeadForm 的操作 */
handleHeadformOperate(payload) {
// 查询,导出,导入,等等
console.log("headform operate: ", payload);
},
/** 处理 表格操作 */
handleOperate({ type, data }) {
console.log("payload", type, data);
@@ -216,7 +219,7 @@ export default {
switch (type) {
case "delete": {
// 确认是否删除
return this.$confirm(`是否删除条目: ${data}`, "提示", {
return this.$confirm(`确定要删除 "${data.name}" 吗?`, "提示", {
confirmButtonText: "确认",
cancelButtonText: "我再想想",
type: "warning",
@@ -226,7 +229,7 @@ export default {
this.$http({
url: this.urls.base,
method: "DELETE",
data: [`${data}`],
data: [`${data.id}`],
}).then(({ data: res }) => {
if (res.code === 0) {
this.$message.success("删除成功!");

View File

@@ -24,7 +24,7 @@ export default function () {
fixed: "right",
width: 180,
subcomponent: TableOperaionComponent,
options: [{ name: "add-sub", permission: "pms:material:save" }, "edit", { name: "delete", permission: "pms:material:save" },],
options: [{ name: "add-sub", permission: "pms:material:save" }, "edit", { name: "delete", emitFull: true, permission: "pms:material:save" },],
},
];
@@ -73,17 +73,17 @@ export default function () {
input: true,
label: "物料名称",
prop: "name",
rules: { required: true, message: "not empty", trigger: "blur" },
rules: { required: true, message: "必填项不能为空", trigger: "blur" },
elparams: { placeholder: "请输入物料名称" },
},
{
input: true,
label: "物料编码",
prop: "code",
rules: { required: true, message: "not empty", trigger: "blur" },
rules: { required: true, message: "必填项不能为空", trigger: "blur" },
elparams: { placeholder: "请输入物料编码" },
},
{ input: true, label: "堆积密度(g/cm3)", prop: "density", elparams: { placeholder: "堆积密度" } },
{ input: true, label: "堆积密度(g/cm³)", prop: "density", elparams: { placeholder: "堆积密度" } },
],
[
@@ -93,7 +93,7 @@ export default function () {
prop: "parentId",
// TODO: 待解决DialogWithMenu 中设置default只在初始化的时候有效一旦清空过就无效了
// default: '0',
// rules: { required: true, message: "not empty", trigger: "blur" },
// rules: { required: true, message: "必填项不能为空", trigger: "blur" },
options: [{ id: '0', name: '无' }], // 手动注入额外选项,用到的场景不多...
fetchData: () => this.$http.get('/pms/material/page', { params: { page: 1, limit: 999, key: '' } }),
elparams: { placeholder: "请选择父级物料", filterable: true, clearable: true },
@@ -109,7 +109,7 @@ export default function () {
select: true,
label: "物料类型",
prop: "typeId",
rules: { required: true, message: "not empty", trigger: "blur" },
rules: { required: true, message: "必填项不能为空", trigger: "blur" },
options: [],
fetchData: () => this.$http.get('/pms/materialType/page', { params: { page: 1, limit: 999 } }),
elparams: { placeholder: "请输入物料类型" },
@@ -128,7 +128,7 @@ export default function () {
// input: true,
// label: "设备类型",
// prop: "eqTypeId",
// rules: { required: true, message: "not empty", trigger: "blur" },
// rules: { required: true, message: "必填项不能为空", trigger: "blur" },
// elparams: { placeholder: "请输入设备类型" },
// },
],
@@ -183,7 +183,7 @@ export default function () {
subcomponent: TableOperaionComponent,
options: [
{ name: "edit", permission: "pms:materialArrt:save" },
{ name: "delete", permission: "pms:materialArrt:save" },
{ name: "delete", emitFull: true, permission: "pms:materialArrt:save" },
],
},
],