130 lines
3.8 KiB
JavaScript
130 lines
3.8 KiB
JavaScript
// import i18n from '@/i18n'
|
||
|
||
export default {
|
||
name: "TableOperations",
|
||
props: {
|
||
injectData: {
|
||
type: Object,
|
||
default: () => ({}),
|
||
},
|
||
},
|
||
data() {
|
||
return {
|
||
btnTypes: {
|
||
add: "primary",
|
||
delete: "danger",
|
||
detail: "info",
|
||
// add more...
|
||
},
|
||
colors: {
|
||
delete: "#FF5454",
|
||
preview: "#f09843",
|
||
design: "#99089f",
|
||
"destroy-order": "#FF5454",
|
||
"confirm-order": "#37d97f",
|
||
"end-order": "#f09843",
|
||
"move-to-top": "#8833ff",
|
||
"move-to-bottom": "#8833ff",
|
||
// 'view-trend': 'red'
|
||
// add more...
|
||
},
|
||
text: {
|
||
// TODO: i18n
|
||
// edit: i18n.t('edit'),
|
||
// detail: i18n.t('detail'),
|
||
// delete: i18n.t('delete'),
|
||
// viewAttr: i18n.t('viewattr'),
|
||
// preview: i18n.t('preview'),
|
||
// design: i18n.t('design'),
|
||
copy: "复制",
|
||
edit: "编辑",
|
||
detail: "详情",
|
||
delete: "删除",
|
||
viewAttr: "查看属性",
|
||
preview: "预览",
|
||
view: "查看",
|
||
design: "设计",
|
||
"view-trend": "查看趋势",
|
||
"add-sub": "添加子类",
|
||
// add more...
|
||
},
|
||
};
|
||
},
|
||
// mounted() {
|
||
// console.log('inject data', this.injectData)
|
||
// },
|
||
methods: {
|
||
// 发射事件
|
||
emit(opt) {
|
||
let emitFull = false;
|
||
let eventType = "default";
|
||
let customField;
|
||
if (typeof opt === "object") {
|
||
eventType = opt.name;
|
||
customField = opt.emitField || "id";
|
||
emitFull = opt.emitFull || false;
|
||
} else {
|
||
eventType = opt;
|
||
}
|
||
|
||
/** 处理 toRouter */
|
||
let payload = { type: eventType, data: emitFull ? this.injectData : customField ? this.injectData[customField] : this.injectData.id };
|
||
if ("url" in opt) {
|
||
payload.url = this.injectData.url;
|
||
}
|
||
if ("toRouter" in opt) {
|
||
payload.toRouter = opt.toRouter;
|
||
}
|
||
// this.$emit('emit-data', { type: eventType, data: emitFull ? this.injectData : customField ? this.injectData[customField] : this.injectData.id, url: this.injectData.url, toRouter: opt.toRouter })
|
||
this.$emit("emit-data", payload);
|
||
},
|
||
},
|
||
render: function (h) {
|
||
let btns = [];
|
||
for (const opt of this.injectData.head?.options) {
|
||
const optIsObj = typeof opt === "object";
|
||
|
||
if (optIsObj) {
|
||
// 注意：为空字符串或null/undefined都会不验证权限
|
||
if (!opt.permission || (opt.permission && this.$hasPermission(opt.permission))) {
|
||
// 检查可用状态
|
||
let shouldDisabled = false;
|
||
if ("enable" in opt && typeof opt.enable === "function") {
|
||
shouldDisabled = opt.enable(this.injectData);
|
||
}
|
||
btns.push(
|
||
h(
|
||
"el-button",
|
||
{
|
||
props: {
|
||
type: opt.type ?? "text",
|
||
icon: opt.icon ? `el-icon-${opt.icon}` : "",
|
||
title: opt.label ?? opt.name,
|
||
disabled: shouldDisabled,
|
||
},
|
||
style: { color: opt.color || this.colors[opt.name] || "#0b58ff" },
|
||
on: { click: this.emit.bind(null, opt) },
|
||
},
|
||
opt.icon ? (opt.showText ? this.text[opt.name] ?? opt.label : "") : opt.label ?? this.text[opt.name]
|
||
)
|
||
);
|
||
}
|
||
} else {
|
||
// 此时 opt 是一个 string，且默认有操作权限
|
||
btns.push(
|
||
h(
|
||
"el-button",
|
||
{
|
||
props: { type: "text" },
|
||
style: { color: this.colors[opt] || "#0b58ff" },
|
||
on: { click: this.emit.bind(null, opt) },
|
||
},
|
||
this.text[opt] ?? opt
|
||
)
|
||
);
|
||
}
|
||
}
|
||
return h("span", null, btns);
|
||
},
|
||
};
|