update operationComponent

This commit is contained in:
lb 2023-03-14 16:30:05 +08:00
parent 183335f9fe
commit f9ad79f6bc
3 changed files with 70 additions and 73 deletions

View File

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

View File

@ -31,7 +31,7 @@ export default function () {
fixed: "right", fixed: "right",
width: 160, width: 160,
subcomponent: TableOperaionComponent, subcomponent: TableOperaionComponent,
options: ['add', 'edit'] options: ['add', { name: 'edit', enable: injectRow => { return 'task' in injectRow && injectRow.task === 'Manual'} }] // 只有 injectRow.task 为手动时,才允许编辑
}, },
]; ];

View File

@ -26,20 +26,6 @@ export default {
return this.$route.params.id || ""; return this.$route.params.id || "";
}, },
}, },
// urls: {
// type: Object,
// required: true,
// default: () => ({
// /** url **/ list: null,
// /** url **/ page: null,
// /** url **/ edit: null,
// /** url **/ delete: null,
// /** url **/ detail: null,
// /** url **/ export: null,
// /** url **/ import: null,
// /** url **/ other: null,
// }),
// },
data() { data() {
const { tableConfig, headFormConfigs, urls, dialogConfigs } = initConfig.call(this); const { tableConfig, headFormConfigs, urls, dialogConfigs } = initConfig.call(this);
return { return {