xiaoyu
217 lines
4.7 KiB
JavaScript
217 lines
4.7 KiB
JavaScript
import FileSort from "./file-sort";
|
|
import FileTableItem from "./file-table-item";
|
|
const fileTable = {
|
|
name: "FileTable",
|
|
props: {
|
|
data: Array,
|
|
icons: Array,
|
|
selection: Array,
|
|
checkbox: Boolean,
|
|
checked: Boolean,
|
|
indeterminate: Boolean,
|
|
total: Number,
|
|
totalText: String,
|
|
checkAllText: String,
|
|
nameText: String,
|
|
sizeText: String,
|
|
timeText: String,
|
|
sort: {
|
|
type: [String, Boolean],
|
|
default: false
|
|
},
|
|
order: String,
|
|
columns: Array
|
|
},
|
|
emits: [
|
|
"check-all-change",
|
|
"item-click",
|
|
"item-check-change",
|
|
"sort-change",
|
|
"item-context-menu"
|
|
],
|
|
computed: {
|
|
checkboxClass() {
|
|
return [
|
|
"ele-file-list-table-item-check ele-file-icon-check",
|
|
{ checked: this.checked },
|
|
{ indeterminate: this.indeterminate }
|
|
];
|
|
},
|
|
tableCols() {
|
|
if (this.columns) {
|
|
return this.columns;
|
|
}
|
|
const cols = [
|
|
{
|
|
title: this.sizeText,
|
|
prop: "length",
|
|
style: {
|
|
width: "120px",
|
|
flexShrink: 0
|
|
}
|
|
},
|
|
{
|
|
title: this.timeText,
|
|
prop: "updateTime",
|
|
style: {
|
|
width: "180px",
|
|
flexShrink: 0
|
|
}
|
|
}
|
|
];
|
|
return cols;
|
|
}
|
|
},
|
|
methods: {
|
|
onCheckAllChange() {
|
|
this.$emit("check-all-change");
|
|
},
|
|
onItemClick(item) {
|
|
this.$emit("item-click", item);
|
|
},
|
|
onItemCheckChange(item) {
|
|
this.$emit("item-check-change", item);
|
|
},
|
|
onSortChange(sort) {
|
|
this.$emit("sort-change", sort);
|
|
},
|
|
onItemContextMenu(option) {
|
|
this.$emit("item-context-menu", option);
|
|
}
|
|
},
|
|
render(h) {
|
|
var _a;
|
|
const nodes = [];
|
|
const headerNodes = [];
|
|
if (this.checkbox) {
|
|
headerNodes.push(
|
|
h(
|
|
"div",
|
|
{
|
|
class: "ele-file-list-table-item-check-group"
|
|
},
|
|
[
|
|
h("i", {
|
|
class: this.checkboxClass,
|
|
on: {
|
|
click: (e) => {
|
|
e.stopPropagation();
|
|
this.onCheckAllChange();
|
|
}
|
|
}
|
|
})
|
|
]
|
|
)
|
|
);
|
|
}
|
|
const nameNodes = [h("span", {}, this.nameText)];
|
|
if (typeof this.sort === "string") {
|
|
nameNodes.push(
|
|
h(FileSort, {
|
|
props: {
|
|
sort: this.sort,
|
|
order: this.order,
|
|
name: "name"
|
|
}
|
|
})
|
|
);
|
|
}
|
|
headerNodes.push(
|
|
h(
|
|
"div",
|
|
{
|
|
class: "ele-file-list-table-item-name",
|
|
on: {
|
|
click: () => this.onSortChange("name")
|
|
}
|
|
},
|
|
nameNodes
|
|
)
|
|
);
|
|
this.tableCols.forEach((col) => {
|
|
const tSlot = col.headerSlot ? this.$scopedSlots[col.headerSlot] : void 0;
|
|
const temp = [h("span", {}, tSlot ? tSlot({ col }) : col.title)];
|
|
if (typeof this.sort === "string") {
|
|
temp.push(
|
|
h(FileSort, {
|
|
props: {
|
|
sort: this.sort,
|
|
order: this.order,
|
|
name: col.prop
|
|
}
|
|
})
|
|
);
|
|
}
|
|
headerNodes.push(
|
|
h(
|
|
"div",
|
|
{
|
|
key: col.prop,
|
|
style: col.headStyle || col.style,
|
|
class: "ele-file-list-table-item-col",
|
|
on: {
|
|
click: () => this.onSortChange(col.prop)
|
|
}
|
|
},
|
|
temp
|
|
)
|
|
);
|
|
});
|
|
nodes.push(
|
|
h(
|
|
"div",
|
|
{
|
|
class: "ele-file-list-table-header"
|
|
},
|
|
[
|
|
h(
|
|
"div",
|
|
{
|
|
class: "ele-file-list-table-item"
|
|
},
|
|
[
|
|
h(
|
|
"div",
|
|
{
|
|
class: "ele-file-list-table-item-body"
|
|
},
|
|
[headerNodes]
|
|
)
|
|
]
|
|
)
|
|
]
|
|
)
|
|
);
|
|
nodes.push(
|
|
h(
|
|
"div",
|
|
{
|
|
class: "ele-file-list-table-body"
|
|
},
|
|
(_a = this.data) == null ? void 0 : _a.map((item, key) => {
|
|
return h(FileTableItem, {
|
|
key,
|
|
props: {
|
|
item,
|
|
icons: this.icons,
|
|
checkbox: this.checkbox,
|
|
selection: this.selection,
|
|
columns: this.tableCols
|
|
},
|
|
on: {
|
|
"item-click": this.onItemClick,
|
|
"item-check-change": this.onItemCheckChange,
|
|
"context-menu": this.onItemContextMenu
|
|
},
|
|
scopedSlots: this.$scopedSlots
|
|
});
|
|
})
|
|
)
|
|
);
|
|
return h("div", { class: "ele-file-list-table" }, nodes);
|
|
}
|
|
};
|
|
export {
|
|
fileTable as default
|
|
};
|