bugfix
This commit is contained in:
@@ -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>
|
||||
|
||||
|
||||
@@ -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) => {
|
||||
|
||||
@@ -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("删除成功!");
|
||||
|
||||
@@ -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" },
|
||||
],
|
||||
},
|
||||
],
|
||||
|
||||
Reference in New Issue
Block a user