import { h, resolveComponent } from 'vue';
|
let extension = {
|
components: {
|
//动态扩充组件或组件路径
|
//表单header、content、footer对应位置扩充的组件
|
gridHeader: '',
|
gridBody: {
|
render(h) {
|
|
}
|
},
|
gridFooter: '',
|
//弹出框(修改、编辑、查看)header、content、footer对应位置扩充的组件
|
modelHeader: '',
|
modelBody: '',
|
modelFooter: ''
|
},
|
buttons: [], //扩展的按钮
|
tableAction: 'App_Appointment', //指定菜单权限，其他任何页面引用时都会走对应权限
|
text:
|
'代码生成器中设置[是否只读]或如果没有编辑或新建权限弹出框都是只读的(点击用户姓名列可查看表单分组)',
|
methods: {
|
btn1Click(row, $e) {
|
$e.stopPropagation();
|
this.edit(row);
|
},
|
btn2Click(row, $e) {
|
$e.stopPropagation();
|
this.$message.success('点击了按钮');
|
},
|
dropdownClick(value, row, column) {
|
console.log(row);
|
this.$message.success(value);
|
},
|
//事件扩展
|
onInit() {
|
this.buttons.push({
|
name: '查看代码',
|
onClick: () => {
|
window.open('http://api.volcore.xyz/vol.doc/appointment.html', 'blank');
|
}
|
});
|
|
//设置显示所有查询条件
|
this.setFiexdSearchForm(true);
|
|
//表格上添加自定义按钮
|
this.columns.push({
|
title: '操作',
|
field: '操作',
|
width: 150,
|
align: 'center',
|
render: (h, { row, column, index }) => {
|
|
}
|
});
|
|
//表格显示Tooltip提示
|
this.columns.forEach((col) => {
|
if (col.field == 'Describe') {
|
col.title = '单元格Tooltip(鼠标放上来看效果)';
|
col.render = (h, { row, column, index }) => {
|
|
};
|
}
|
});
|
|
//增加弹出框提示信息
|
//https://cn.vuejs.org/guide/extras/render-function.html#passing-slots
|
//自定义提示
|
this.editFormOptions[0][0].extra = {
|
render: (h) => {
|
|
}
|
};
|
|
// <el-popover
|
// placement="top-start"
|
// title="Title"
|
// :width="200"
|
// trigger="hover"
|
// content="this is content, this is content, this is content"
|
// >
|
// <template #reference>
|
// <el-button>Hover to activate</el-button>
|
// </template>
|
// </el-popover>
|
|
//格式化单格颜色
|
this.columns.forEach((x) => {
|
if (x.field == 'PhoneNo') {
|
x.cellStyle = (row, rowIndex, columnIndex) => {
|
if (row.PhoneNo == '138888887698' && rowIndex == 0) {
|
return { background: '#ddecfd' };
|
}
|
};
|
}
|
if (x.field == 'Creator') {
|
x.cellStyle = (row, rowIndex, columnIndex) => {
|
if (row.Creator == '超级管理员') {
|
return { background: 'rgb(45 140 240)', color: '#ffff' };
|
}
|
};
|
}
|
|
if (x.field == 'Name') {
|
x.title = '点击查看表单';
|
}
|
});
|
|
//设置表单分组
|
this.editFormOptions.splice(0, 0, [
|
{
|
colSize: 12,
|
render: (h) => {
|
|
}
|
}
|
]);
|
|
//设置表单分组
|
|
this.editFormOptions.splice(2, 0, [
|
{
|
colSize: 12,
|
render: (h) => {
|
|
}
|
}
|
]);
|
|
//弹出框增加分段alert提示
|
this.editFormOptions.splice(3, 0, [
|
{
|
colSize: 12,
|
render: (h) => {
|
|
}
|
}
|
]);
|
|
//查询界面按钮组
|
//按钮图标这里找https://element.eleme.cn/#/zh-CN/component/icon
|
//第二个按钮后面添加按钮组
|
this.buttons.splice(2, 1, {
|
name: '按钮组',
|
type: 'primary',
|
plain: true,
|
color: '#009688',
|
data: [
|
{
|
name: '按钮一',
|
icon: 'el-icon-plus',
|
onClick: () => {
|
this.$message.info('按钮一');
|
}
|
},
|
{
|
name: '按钮二',
|
icon: 'el-icon-zoom-out',
|
onClick: () => {
|
this.$message.info('按钮二');
|
}
|
}
|
]
|
});
|
},
|
|
onInited() {
|
//多页签菜单打开时，重新设置表格的最大高度
|
if (this.$route.path == '/tabsTable') {
|
this.tableMaxHeight = document.body.clientHeight - 415;
|
} else {
|
//设置表的最大高度
|
this.tableMaxHeight = this.height - 125; //400
|
}
|
//移除快捷查询
|
this.singleSearch = null;
|
}
|
}
|
};
|
export default extension;
|
