import { h, resolveComponent } from 'vue';
|
let extension = {
|
components: {
|
//动态扩充组件或组件路径
|
//表单header、content、footer对应位置扩充的组件
|
gridHeader: '',
|
gridBody: {
|
render(h) {
|
return (
|
<el-alert
|
style={{ 'margin-bottom': '10px' }}
|
type="success"
|
show-icon
|
>
|
<p v-html="1、 onInit(){ this.setFiexdSearchForm(true){设置固定显示所有查询条件}">
|
{' '}
|
</p>
|
<p v-html="2、自定义表格按钮、弹出框提示、弹出框分组信息,见示例：App_Appointment.js文件">
|
{' '}
|
</p>
|
</el-alert>
|
);
|
}
|
},
|
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 }) => {
|
return (
|
<div>
|
<el-button
|
onClick={($e) => {
|
this.btn1Click(row, $e);
|
}}
|
type="primary"
|
plain
|
size="small"
|
style="height:26px; padding: 10px !important;"
|
>
|
查看
|
</el-button>
|
<el-button
|
onClick={($e) => {
|
this.btn2Click(row, $e);
|
}}
|
type="success"
|
plain
|
size="small"
|
style="height:26px;padding: 10px !important;"
|
>
|
按钮
|
</el-button>
|
|
<el-dropdown
|
onClick={(value) => {
|
this.dropdownClick(value);
|
}}
|
trigger="click"
|
v-slots={{
|
dropdown: () => (
|
<el-dropdown-menu>
|
<el-dropdown-item>
|
<div
|
onClick={() => {
|
this.dropdownClick('京酱肉丝', row, column);
|
}}
|
>
|
京酱肉丝
|
</div>
|
</el-dropdown-item>
|
<el-dropdown-item>
|
<div
|
onClick={() => {
|
this.dropdownClick('驴肉火烧', row, column);
|
}}
|
>
|
驴肉火烧
|
</div>
|
</el-dropdown-item>
|
<el-dropdown-item>
|
<div
|
onClick={() => {
|
this.dropdownClick('吊炉烤鸭', row, column);
|
}}
|
>
|
吊炉烤鸭
|
</div>
|
</el-dropdown-item>
|
</el-dropdown-menu>
|
)
|
}}
|
>
|
<span
|
style="font-size: 13px;color: #409eff;margin: 5px 0 0 10px;"
|
class="el-dropdown-link"
|
>
|
更多<i class="el-icon-arrow-right"></i>
|
</span>
|
</el-dropdown>
|
</div>
|
);
|
}
|
});
|
|
//表格显示Tooltip提示
|
this.columns.forEach((col) => {
|
if (col.field == 'Describe') {
|
col.title = '单元格Tooltip(鼠标放上来看效果)';
|
col.render = (h, { row, column, index }) => {
|
return (
|
<el-popover
|
placement="top-start"
|
title="提示信息"
|
width={350}
|
trigger="hover"
|
content={
|
row.Describe +
|
',这里是用render渲染的表格提示,示例见:App_Appointment.js'
|
}
|
>
|
{{ reference: <span>{row.Describe}</span> }}
|
</el-popover>
|
);
|
};
|
}
|
});
|
|
//增加弹出框提示信息
|
//https://cn.vuejs.org/guide/extras/render-function.html#passing-slots
|
//自定义提示
|
this.editFormOptions[0][0].extra = {
|
render: (h) => {
|
return (
|
<el-popover
|
placement="top-start"
|
title="Title"
|
width="200"
|
trigger="hover"
|
content="this is content, this is content, this is content"
|
>
|
{/* 这里对应下面的#reference数据槽 */}
|
{{ reference: <i class="el-icon-warning-outline"></i> }}
|
</el-popover>
|
);
|
}
|
};
|
|
// <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) => {
|
return (
|
<div
|
style={{
|
display: 'flex',
|
'margin-bottom': '-4px',
|
'line-height': '20px',
|
'margin-top': '5px',
|
'padding-bottom': '5px',
|
'border-bottom': '1px solid rgb(238, 238, 238)'
|
}}
|
>
|
<div style="height: 19px; background: rgb(45, 206, 217); width: 9px; border-radius: 10px;"></div>
|
<div style="padding-left: 6px; font-weight: bold; font-size: 13px;">
|
基本信息
|
</div>
|
</div>
|
);
|
}
|
}
|
]);
|
|
//设置表单分组
|
|
this.editFormOptions.splice(2, 0, [
|
{
|
colSize: 12,
|
render: (h) => {
|
return (
|
<div
|
style={{
|
display: 'flex',
|
'margin-bottom': '-4px',
|
'line-height': '20px',
|
'margin-top': '5px',
|
'padding-bottom': '5px',
|
'border-bottom': '1px solid rgb(238, 238, 238)'
|
}}
|
>
|
<div style="height: 19px; background: rgb(45, 206, 217); width: 9px; border-radius: 10px;"></div>
|
<div style="padding-left: 6px; font-weight: bold; font-size: 13px;">
|
基本信息
|
</div>
|
</div>
|
);
|
}
|
}
|
]);
|
|
//弹出框增加分段alert提示
|
this.editFormOptions.splice(3, 0, [
|
{
|
colSize: 12,
|
render: (h) => {
|
return (
|
<el-alert
|
title="这里是自定的提示信息"
|
style={{ padding: 0 }}
|
type="success"
|
></el-alert>
|
);
|
}
|
}
|
]);
|
|
//查询界面按钮组
|
//按钮图标这里找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;
|
