<template>
|
<div>
|
<avue-crud
|
ref="crud"
|
v-model="form"
|
:before-close="beforeClose"
|
:before-open="beforeOpen"
|
:data="data"
|
:option="option"
|
:table-loading="tableLoading"
|
@row-save="rowSaveHandler"
|
@row-update="rowUpdateHandler"
|
@selection-change="selectChangeHandler"
|
@row-click="rowClickHandler">
|
<template slot="menuLeft" slot-scope="scope">
|
<el-button icon="el-icon-plus" plain size="small" type="primary"
|
@click="addClickHandler">增加
|
</el-button>
|
<el-button icon="el-icon-edit-outline" plain size="small" type="primary"
|
@click="btnDesignClickHandler">按钮设计
|
</el-button>
|
</template>
|
|
<template slot="menu" slot-scope="scope">
|
<el-button icon="el-icon-edit" size="small" type="text" @click="editBtnClick(scope.row)">编辑
|
</el-button>
|
<el-button icon="el-icon-delete" size="small" type="text" @click="rowDeleteHandler(scope.row)">删除
|
</el-button>
|
<el-button icon="el-icon-document-copy" size="small" type="text" @click="rowCloneHandler(scope.row)">克隆
|
</el-button>
|
</template>
|
|
<!-- eventKey以及eventValue显示区域 -->
|
<template slot="bottomValueForm" slot-scope="scope">
|
<avue-crud
|
:data="eventData"
|
:option="eventOption"
|
@row-click="formDataRowClick">
|
<template slot="menuLeft" slot-scope="scope">
|
<el-button plain size="mini" type="primary" @click="formDataAddClickHandler">创建</el-button>
|
</template>
|
|
<template slot="menu" slot-scope="scope">
|
<el-button plain size="mini" type="danger" @click="formDataDelClickHandler(scope.row)">删除</el-button>
|
<el-button plain size="mini" type="primary" @click="moveUp(scope.row)">上移</el-button>
|
<el-button plain size="mini" type="primary" @click="moveDown(scope.row)">下移</el-button>
|
</template>
|
</avue-crud>
|
</template>
|
|
<!-- 切换搜索类型 源对象 目标对象显示label切换 -->
|
<template slot="showTypeLabel" slot-scope="{}">
|
<span v-if="form.templateType === '3'">顶级节点</span>
|
<span v-else-if="form.templateType === '5'">业务类型</span>
|
<span v-else-if="form.templateType === '6'">对象类型</span>
|
<span v-else-if="form.searchTarger === '1'">源对象</span>
|
<span v-else-if="form.searchTarger === '2'">目标对象</span>
|
</template>
|
</avue-crud>
|
<el-dialog
|
v-dialogDrag
|
:visible.sync="btnDesignVisible"
|
append-to-body="true"
|
class="avue-dialog"
|
title="配置按钮"
|
width="75%"
|
@close="dialogClose">
|
<el-container v-loading="dialogLoading">
|
<el-header style="height: 40px !important;">
|
<div style="display: flex">
|
<el-button :disabled="!disabledBtn" plain size="mini" type="primary" @click="addClickBtnHandler">添加
|
</el-button>
|
<el-button :disabled="!disabledBtn" plain size="mini" type="primary" @click="editClickBtnHandler">修改
|
</el-button>
|
<el-button :disabled="!disabledBtn" plain size="mini" type="danger" @click="delClickBtnHandler">删除
|
</el-button>
|
<el-button :disabled="disabledBtn" plain size="mini" type="primary" @click="saveClickBtnHandler">保存
|
</el-button>
|
<el-button :disabled="disabledBtn" plain size="mini" type="primary" @click="escClickBtnHandler">取消
|
</el-button>
|
<el-button plain size="mini" type="primary" @click="changeBottomBtnHandler">调整为下级按钮</el-button>
|
<el-button plain size="mini" type="primary" @click="changeTopBtnHandler">调整为上级按钮</el-button>
|
<el-button plain size="mini" type="primary" @click="cloneClickBtnHandler">复制到其他组件</el-button>
|
</div>
|
</el-header>
|
<el-container>
|
<el-aside width="20%">
|
<basic-container>
|
<div style="height:650px;">
|
<avue-tree
|
ref="Tree"
|
:data="treeData"
|
:loading="treeLoading"
|
:option="treeOption"
|
node-key="value"
|
@node-click="nodeTreeClick">
|
<span slot-scope="{ node, data }" class="el-tree-node__label">
|
<span style="font-size: 14px">
|
<i class="el-icon-s-promotion"></i>
|
{{ (node || {}).label }}
|
</span>
|
</span>
|
</avue-tree>
|
</div>
|
</basic-container>
|
</el-aside>
|
|
<el-main>
|
<basic-container>
|
<el-divider content-position="left">基础信息</el-divider>
|
<el-form ref="form" :model="basicForm" :rules="rules" label-width="90px" size="small"
|
style="margin-top: 20px">
|
<el-row>
|
<el-form-item :inline-message='true' label="编号：" prop="seq">
|
<el-input-number v-model="basicForm.seq" :disabled="disabledBtn" :max="9999" :min="1"
|
controls-position="right"></el-input-number>
|
</el-form-item>
|
|
<el-form-item :inline-message='true' label="名称：" prop="label">
|
<el-col :span="14">
|
<el-input v-model="basicForm.label" :readonly="disabledBtn"></el-input>
|
</el-col>
|
</el-form-item>
|
|
<el-form-item label="Action：" prop="Action">
|
<el-col :span="14">
|
<div style="display: flex">
|
<el-input v-model="basicForm.actionName" :readonly="disabledBtn"></el-input>
|
<el-button :disabled="disabledBtn" size="mini" style="margin-left: 10px" type="success"
|
@click="actionFoucus">选择
|
</el-button>
|
</div>
|
</el-col>
|
</el-form-item>
|
|
<el-col :span="12">
|
<el-form-item label="是否授权：" prop="authorization">
|
<el-radio v-model="basicForm.authorization" :disabled="disabledBtn" label="0">是</el-radio>
|
<el-radio v-model="basicForm.authorization" :disabled="disabledBtn" label="1">否</el-radio>
|
</el-form-item>
|
</el-col>
|
|
<el-col :span="12">
|
<el-form-item label="是否显示：" prop="show">
|
<el-radio v-model="basicForm.show" :disabled="disabledBtn" label="0">是</el-radio>
|
<el-radio v-model="basicForm.show" :disabled="disabledBtn" label="1">否</el-radio>
|
</el-form-item>
|
</el-col>
|
|
<el-col :span="12">
|
<el-form-item label="显示方式：" prop="showType">
|
<el-radio v-model="basicForm.displayMode" :disabled="disabledBtn" label="text">文字</el-radio>
|
<el-radio v-model="basicForm.displayMode" :disabled="disabledBtn" label="image">图标</el-radio>
|
<el-radio v-model="basicForm.displayMode" :disabled="disabledBtn" label="textandimage">文字和图标
|
</el-radio>
|
</el-form-item>
|
</el-col>
|
|
<el-col :span="12">
|
<el-form-item label="提示信息：" prop="desc">
|
<el-input v-model="basicForm.desc" :readonly="disabledBtn" type="textarea"></el-input>
|
</el-form-item>
|
</el-col>
|
|
</el-row>
|
</el-form>
|
|
<el-divider content-position="left">参数信息</el-divider>
|
<avue-crud
|
ref="paramsCrud"
|
v-model="paramsForm"
|
:data="paramsData"
|
:option="paramsOption"
|
style="margin-top: 20px"
|
@row-save="paramsRowSave"
|
@row-update="paramsRowUpdate">
|
<template slot="menuLeft" slot-scope="scope">
|
<el-button :disabled="disabledBtn" icon="el-icon-plus" plain size="small" type="primary"
|
@click="paramsRowAddClickHandler">创建
|
</el-button>
|
</template>
|
|
<template slot="menu" slot-scope="scope">
|
<el-button :disabled="disabledBtn" icon="el-icon-edit" size="small" type="text"
|
@click="paramsRowEditHandler(scope.row)">修改
|
</el-button>
|
<el-button :disabled="disabledBtn" icon="el-icon-delete" size="small" type="text"
|
@click="paramsRowDeleteHandler(scope.row)">删除
|
</el-button>
|
</template>
|
|
</avue-crud>
|
</basic-container>
|
</el-main>
|
</el-container>
|
</el-container>
|
</el-dialog>
|
<action-dialog ref="actionDialog" @updataAction="actionSaveHandler"></action-dialog>
|
<clone-dialog ref="cloneDialog" :fromOid="fromOid" :sourceOId="sourceOId" paramsType="tab"
|
type="pageDef"></clone-dialog>
|
<clone-dialog ref="cloneBtnDialog" :fromOid="formBtnOid" :sourceOId="sourceBtnOid" paramsType="pageDef"
|
type="tabButton"></clone-dialog>
|
</div>
|
</template>
|
|
<script>
|
import basicOption from "@/util/basic-option";
|
import func from "@/util/func";
|
import {
|
getPLPageDefinations,
|
getTabButtons,
|
addTapButton,
|
updateTapButton,
|
addPageDefination,
|
deleteTabButton,
|
delPageDefination,
|
joinBtn,
|
exitBtn,
|
updatePageDefination
|
} from "@/api/UI/uiDefine";
|
import actionDialog from '@/views/modelingMenu/ui/Aciton/components/dialog';
|
import cloneDialog from "@/views/modelingMenu/ui/uiDefine/rightRegion/cloneDialog";
|
|
export default {
|
props: {
|
sourceData: {
|
type: Object,
|
default: () => {
|
}
|
},
|
height: {
|
type: String,
|
default: () => "auto"
|
}
|
},
|
components: {
|
actionDialog,
|
cloneDialog
|
},
|
name: "index",
|
data() {
|
return {
|
formBtnOid: '',
|
sourceBtnOid: '',
|
sourceOId: '',
|
fromOid: '',
|
paramsForm: {},
|
eventOption: {
|
...basicOption,
|
addBtn: false,
|
// editBtn: false,
|
delBtn: false,
|
refreshBtn: false,
|
highlightCurrentRow: true,
|
height: 200,
|
column: [
|
{
|
label: 'EventKey',
|
prop: 'eventKey',
|
type: 'select',
|
value: 'SelectionEvent',
|
dicData: [
|
{
|
label: 'SelectionEvent',
|
value: 'SelectionEvent'
|
},
|
{
|
label: 'DBClickEvent',
|
value: 'DBClickEvent'
|
},
|
{
|
label: 'ClickEvent',
|
value: 'ClickEvent'
|
}
|
],
|
cell: true
|
},
|
{
|
label: 'EventValue',
|
prop: 'eventValue',
|
cell: true,
|
rules: [
|
{
|
required: true,
|
message: '请输入eventValue',
|
trigger: 'blur'
|
}
|
]
|
}
|
]
|
},
|
eventData: [],
|
btnActionVisible: false,
|
dialogLoading: false,
|
saveType: '',
|
disabledBtn: true,
|
paramsData: [],
|
nodeTreeRow: {},
|
paramsOption: {
|
...basicOption,
|
height: 260,
|
addBtn: false,
|
tip: false,
|
editBtn: false,
|
delBtn: false,
|
refreshBtn: false,
|
column: [
|
{
|
label: '名称',
|
prop: 'name',
|
span: 24,
|
rules: [
|
{
|
required: true,
|
message: '请输入名称',
|
trigger: 'blur'
|
}
|
]
|
},
|
{
|
label: '值',
|
prop: 'value',
|
span: 24,
|
rules: [
|
{
|
required: true,
|
message: '请输入值',
|
trigger: 'blur'
|
}
|
]
|
}
|
]
|
},
|
rules: {
|
seq: [
|
{required: true, message: '请输入编号', type: 'number', trigger: 'blur'},
|
],
|
label: [
|
{required: true, message: '请输入名称', trigger: 'blur'},
|
],
|
},
|
// 按钮设计 基础信息
|
basicForm: {
|
seq: 1
|
},
|
treeData: [],
|
treeOption: {
|
menu: false,
|
addBtn: false,
|
defaultExpandedKeys: ['parentNode'],
|
props: {
|
label: 'label',
|
value: 'oId',
|
children: 'children',
|
},
|
},
|
treeLoading: false,
|
btnDesignVisible: false,
|
FormData: [],
|
form: {},
|
data: [],
|
option: {
|
...basicOption,
|
height: this.height,
|
addBtn: false,
|
index: true,
|
calcHeight: -30,
|
editBtn: false,
|
delBtn: false,
|
column: [
|
{
|
label: '名称',
|
prop: 'name',
|
rules: [
|
{
|
required: true,
|
message: '请输入名称',
|
trigger: 'blur'
|
}
|
]
|
},
|
{
|
label: '编号',
|
prop: 'seq',
|
hide: false,
|
rules: [
|
{
|
required: true,
|
message: '请输入编号',
|
trigger: 'blur'
|
}
|
],
|
},
|
{
|
label: 'UI解析类型',
|
prop: 'uiParser',
|
hide: true,
|
},
|
{
|
label: '扩展属性',
|
prop: 'extAttr',
|
hide: true,
|
},
|
{
|
label: '模板类型',
|
prop: 'templateType',
|
type: 'radio',
|
span: 24,
|
value: '1',
|
dicData: [
|
{
|
label: 'Table(表格)',
|
value: '1'
|
},
|
{
|
label: 'Custom（自定义模板）',
|
value: '2'
|
},
|
{
|
label: 'TreeTable(树表)',
|
value: '3',
|
},
|
{
|
label: 'Form(表单)',
|
value: '4',
|
},
|
{
|
label: 'Tree(树)',
|
value: '5',
|
},
|
{
|
label: 'UILayout(UI定义)',
|
value: '6',
|
}
|
],
|
formatter: (row) => {
|
const val = this.templateTypeValueHandler(row.templateType);
|
return val;
|
},
|
change: (val) => {
|
const list = ['showType', 'linkType', 'templateId', 'SubUILayout', 'searchObjType', 'queryTemplateName', 'controlPath', 'expandCols', 'rootContent', 'showAbs', 'showLinkAbs', 'separator']
|
// list.forEach(item => {
|
// this.form[item] = "";
|
// })
|
this.form.searchTarger = '1'
|
const searchTarger = this.option.column.find(item => item.prop === 'searchTarger'); // 获取搜索类型配置项
|
searchTarger.display = true; // 切换默认展示搜索类型
|
// 模板类型为表格
|
this.templateTypeTable(val.value === '1');
|
// 模板类型为自定义模板
|
this.templateTypeCustom(val.value === '2');
|
// 模板类型为树表
|
this.templateTypeTreeTable(val.value === '3');
|
// 模板类型为表单
|
this.templateTypeForm(val.value === '4');
|
// 模板类型为树
|
this.templateTypeTree(val.value === '5');
|
// 模板类型为UI定义
|
this.templateTypeUI(val.value === '6');
|
}
|
},
|
{
|
label: '显示类型',
|
prop: 'navigatorType',
|
type: 'radio',
|
span: 24,
|
value: '1',
|
hide: true,
|
dicData: [
|
{
|
label: '不显示',
|
value: '3'
|
},
|
{
|
label: '显示角色',
|
value: '2'
|
},
|
{
|
label: '显示Folder',
|
value: '1',
|
},
|
],
|
},
|
{
|
label: '搜索类型',
|
prop: 'searchTarger',
|
display: true,
|
type: 'radio',
|
value: '1',
|
span: 24,
|
dicData: [
|
{
|
label: '本对象属性',
|
value: '1'
|
},
|
{
|
label: '关联对象属性',
|
value: '2'
|
},
|
],
|
formatter: (row) => {
|
return row.searchTarger === '1' ? '本对象属性' : '关联对象属性';
|
},
|
change: (val) => {
|
// 如果模板类型是表格、 树表 、 表单 切换对象属性的时候，如果是本对象属性不展示链接类型，否则展示链接类型
|
if (['1', '3', '4'].includes(this.form.templateType)) {
|
const obj = this.option.group[0].column.find(item => item.prop === 'linkType');
|
obj.display = val.value !== '1';
|
}
|
// 切换清空模板类型
|
const list = ['showType', 'linkType', 'templateId', 'SubUILayout', 'queryTemplateName', 'searchObjType'];
|
// list.forEach(item => {
|
// this.form[item] = '';
|
// })
|
}
|
},
|
{
|
label: '描述',
|
prop: 'description',
|
display: false
|
},
|
],
|
group: [
|
{
|
label: '',
|
arrow: false,
|
prop: 'group1',
|
column: [
|
{
|
label: '源对象',
|
prop: 'showType',
|
type: 'select',
|
cascader: ['linkType', 'templateId', 'SubUILayout', 'searchObjType', 'queryTemplateName'],
|
placeholder: "请输入内容",
|
dicUrl: '/api/uiManagerController/getBtmDatasByPage?page=1&limit=-1',
|
filterable: true,
|
props: {
|
label: 'name',
|
value: 'name',
|
desc: 'label'
|
},
|
rules: [
|
{
|
required: true,
|
message: '请选择内容',
|
trigger: 'change'
|
}
|
],
|
},
|
{
|
label: '链接类型',
|
prop: 'linkType',
|
type: 'select',
|
display: false,
|
filterable: true,
|
props: {
|
label: 'name',
|
value: 'name',
|
desc: 'tag'
|
},
|
dicUrl: '/api/uiManagerController/getLinkDatasByPage?page=1&limit=-1&conditionMap[selectBtmType]={{key}}',
|
},
|
{
|
label: '选择模板',
|
prop: 'templateId',
|
display: false,
|
type: 'select',
|
filterable: true,
|
dicUrl: '/api/uiManagerController/getPortalVIDatasByPage?page=1&limit=-1&conditionMap[selectBtmType]={{key}}',
|
rules: [
|
{
|
required: true,
|
message: '请选择模板',
|
trigger: 'submit'
|
}
|
],
|
props: {
|
label: 'viName',
|
value: 'viName',
|
desc: 'viType'
|
},
|
},
|
{
|
label: 'UI定义',
|
prop: 'SubUILayout',
|
type: 'select',
|
filterable: true,
|
display: false,
|
props: {
|
label: 'plName',
|
value: 'plCode',
|
},
|
dicUrl: '/api/uiManagerController/getUILayoutDatasByPage?page=1&limit=-1&conditionMap[selectBtmType]={{key}}',
|
},
|
{
|
label: '查询类型',
|
prop: 'searchType',
|
display: false,
|
value: '1',
|
type: 'radio',
|
span: 24,
|
dicData: [
|
{
|
label: '业务类型',
|
value: '1'
|
},
|
{
|
label: '链接类型',
|
value: '2'
|
}
|
]
|
},
|
{
|
label: '查询对象类型',
|
prop: 'searchObjType',
|
type: 'select',
|
display: false,
|
labelWidth: 100,
|
props: {
|
label: 'qtName',
|
value: 'qtName',
|
desc: 'btmName'
|
},
|
dicUrl: '/api/uiManagerController/getLinkDatasByPage?page=1&limit=-1&conditionMap[selectBtmType]=',// cs端有问题 暂时不展示内容
|
},
|
{
|
label: '查询模板',
|
prop: 'queryTemplateName',
|
type: 'select',
|
filterable: true,
|
display: false,
|
props: {
|
label: 'qtName',
|
value: 'qtName',
|
desc: 'btmName'
|
},
|
dicUrl: '/api/uiManagerController/getQTInfoDatasByPage?page=1&limit=-1&conditionMap[selectBtmType]={{key}}',
|
},
|
{
|
label: '控制路径',
|
prop: 'controlPath',
|
display: false,
|
type: 'textarea',
|
span: 24,
|
rows: 3
|
},
|
{
|
label: '树结构展开列',
|
prop: 'expandCols',
|
labelWidth: 110,
|
display: false,
|
span: 12
|
},
|
{
|
label: '参照树设置',
|
prop: 'showLinkAbs',
|
display: false,
|
},
|
{
|
label: '分隔符',
|
prop: 'separator',
|
display: false,
|
},
|
{
|
label: '展开方式',
|
prop: 'expandMode',
|
display: false,
|
type: 'radio',
|
value: '1',
|
dicData: [
|
{
|
label: '逐级展开',
|
value: '1'
|
},
|
{
|
label: '全部展开',
|
value: '0'
|
}
|
]
|
},
|
{
|
label: '根节点显示表达式',
|
prop: 'rootContent',
|
display: false,
|
labelWidth: 135,
|
span: 12
|
},
|
{
|
label: '树节点显示表达式',
|
prop: 'showAbs',
|
display: false,
|
labelWidth: 135,
|
span: 12
|
},
|
]
|
},
|
{
|
label: '',
|
arrow: false,
|
prop: 'group2',
|
column: [
|
{
|
label: '',
|
prop: 'bottomValue',
|
span: 24,
|
labelWidth: 10
|
},
|
]
|
}
|
],
|
},
|
tableLoading: false,
|
lastIndex: null,
|
selectList: [],
|
formDataRow: {},
|
}
|
},
|
watch: {
|
sourceData: {
|
handler(val) {
|
if (val && val.plOId) {
|
this.getTableList();
|
} else {
|
this.data = [];
|
}
|
},
|
immediate: true,
|
deep: true
|
}
|
},
|
computed: {},
|
methods: {
|
//获取列表数据
|
getTableList() {
|
const params = {
|
pageContextOId: this.sourceData.plOId
|
}
|
getPLPageDefinations(params).then(res => {
|
this.data = res.data.data;
|
this.selectList = [];
|
this.$refs.crud.clearSelection();
|
this.tableLoading = false;
|
})
|
},
|
|
// 根据不同值区分类型
|
templateTypeValueHandler(val) {
|
const componentMap = {
|
'1': '表格',
|
'2': '自定义模板',
|
'3': '树表',
|
'4': '表单',
|
'5': '树',
|
'6': 'UI定义',
|
};
|
|
return componentMap[val] || ""; // 如果为空 返回空
|
},
|
|
// 表格多选
|
selectChangeHandler(row) {
|
this.selectList = row;
|
},
|
|
// 行点击
|
rowClickHandler(row) {
|
func.rowClickHandler(
|
row,
|
this.$refs.crud,
|
this.lastIndex,
|
(newIndex) => {
|
this.lastIndex = newIndex;
|
},
|
() => {
|
this.selectList = [];
|
}
|
);
|
},
|
|
// 增加
|
addClickHandler() {
|
console.log(this.sourceData);
|
if (!this.sourceData || !this.sourceData.plOId) {
|
this.$message.error('请在上方选择一条数据后进行添加');
|
return;
|
}
|
this.$refs.crud.rowAdd();
|
},
|
|
// 编辑打开表单前
|
beforeOpen(done, type) {
|
// if (type === 'edit') {
|
// console.log('edit');
|
// this.form.showType = 'Ludc';
|
// }
|
done();
|
},
|
|
// 增加关闭对话框 清空event数组
|
beforeClose(done) {
|
this.eventData = [];
|
done();
|
},
|
|
// 修改
|
editBtnClick(row) {
|
this.eventData = [];
|
if (row.eventKey && row.eventValue) {
|
let keys = row.eventKey.split(',');
|
let values = row.eventValue.split(',');
|
|
this.eventData = keys.map((key, index) => {
|
return {
|
index: this.eventData.length,
|
eventKey: key.trim(),
|
eventValue: values[index],
|
$cellEdit: true
|
};
|
});
|
}
|
this.$refs.crud.rowEdit(row);
|
console.log(this.form);
|
},
|
|
// 删除
|
rowDeleteHandler(row) {
|
console.log(row);
|
this.$confirm('您确定要删除所选择的数据吗？', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => {
|
const params = {
|
oids: row.id
|
}
|
delPageDefination(params).then(res => {
|
if (res.data.code === 200) {
|
this.$message.success('删除成功');
|
this.getTableList();
|
}
|
})
|
}).catch(() => {
|
this.$message({
|
type: 'info',
|
message: '已取消删除'
|
});
|
});
|
},
|
|
// 保存
|
rowSaveHandler(row, done, loading) {
|
if (row.templateType === '6') {
|
row.SubUIObjType = row.showType;
|
row.showType = "";
|
}
|
console.log(this.sourceData);
|
const params = {
|
...row,
|
tabPageOId: this.sourceData.plOId
|
}
|
addPageDefination(params).then(res => {
|
console.log(res);
|
if (res.data.code === 200) {
|
this.$message.success(res.data.obj);
|
this.getTableList();
|
done();
|
}
|
}).catch(err => {
|
loading();
|
})
|
},
|
|
rowUpdateHandler(row,index,done,loading){
|
if (row.templateType === '6') {
|
row.SubUIObjType = row.showType;
|
row.showType = "";
|
}
|
console.log(this.sourceData);
|
const params = {
|
...row,
|
tabPageOId: this.sourceData.plOId
|
}
|
updatePageDefination(params).then(res => {
|
console.log(res);
|
if (res.data.code === 200) {
|
this.$message.success(res.data.obj);
|
this.getTableList();
|
done();
|
}
|
}).catch(err => {
|
loading();
|
})
|
},
|
|
// 对话框表格行点击
|
formDataRowClick(row) {
|
this.formDataRow = row;
|
},
|
|
// 对话框表格添加
|
formDataAddClickHandler() {
|
// if (!this.form.eventKey) {
|
// this.$message.error('请选择EventKey');
|
// return;
|
// }
|
//
|
// if (!this.form.eventValue) {
|
// this.$message.error('请输入EventValue');
|
// return;
|
// }
|
//
|
// if (this.eventData.length >= 1) {
|
// const eventValueStatus = this.eventData.some(item => item.eventValue === this.form.eventValue);
|
//
|
// if (eventValueStatus) {
|
// this.$message.error('已存在相同的 EventValue，不能重复添加');
|
// return;
|
// }
|
// }
|
const obj = {
|
index: this.eventData.length,
|
eventKey: this.form.eventKey || 'SelectionEvent',
|
eventValue: this.form.eventValue,
|
$cellEdit: true
|
}
|
|
this.eventData.push(obj);
|
},
|
|
// 对话框表格删除
|
formDataDelClickHandler(row) {
|
this.eventData = this.eventData.filter(item => item.index !== row.index);
|
},
|
|
// 模板类型显示隐藏方法
|
updateDisplay(val, showTpeMap) {
|
const groupList = this.option.group[0].column; // 获取第一层group所有数据
|
groupList.forEach(item => {
|
item.display = showTpeMap.includes(item.prop) ? val : !val; // 更新display
|
});
|
},
|
|
// 模板类型为表格
|
templateTypeTable(val) {
|
if (!val) return;
|
this.updateDisplay(val, ['showType', 'templateId', 'queryTemplateName']);
|
},
|
|
// 模板类型为自定义模板
|
templateTypeCustom(val) {
|
if (!val) return;
|
const searchTarger = this.option.column.find(item => item.prop === 'searchTarger'); // 获取搜索类型配置项
|
searchTarger.display = false; // 不展示搜索类型
|
this.updateDisplay(val, ['controlPath']);
|
},
|
|
// 模板类型为树表
|
templateTypeTreeTable(val) {
|
if (!val) return;
|
this.updateDisplay(val, ['showType', 'templateId', 'queryTemplateName', 'expandCols', 'expandMode']);
|
},
|
|
// 模板类型为表单
|
templateTypeForm(val) {
|
if (!val) return;
|
this.updateDisplay(val, ['showType', 'templateId', 'queryTemplateName']);
|
},
|
|
// 模板类型为树
|
templateTypeTree(val) {
|
if (!val) return;
|
const searchTarger = this.option.column.find(item => item.prop === 'searchTarger'); // 获取搜索类型配置项
|
searchTarger.display = false; // 不展示搜索类型
|
this.updateDisplay(val, ['showType', 'queryTemplateName', 'rootContent', 'showAbs', 'showLinkAbs', 'separator', 'expandMode', 'linkType']);
|
},
|
|
// 模板类型为UI定义
|
templateTypeUI(val) {
|
if (!val) return;
|
const searchTarger = this.option.column.find(item => item.prop === 'searchTarger'); // 获取搜索类型配置项
|
searchTarger.display = false; // 不展示搜索类型
|
this.updateDisplay(val, ['showType', 'SubUILayout', 'searchType', 'searchObjType', 'queryTemplateName']);
|
},
|
|
// 查找数组中对象索引
|
findIndexByEventValue(array, eventValue) {
|
return array.findIndex(item => item.eventValue === eventValue);
|
},
|
|
// 上移
|
moveUp(row) {
|
const index = this.findIndexByEventValue(this.eventData, row.eventValue);
|
if (index > 0) {
|
// 使用 splice 来模拟交换
|
const temp = this.eventData.splice(index - 1, 1, this.eventData[index])[0]; // 移除 index-1 的元素 并在相同位置插入 index 的元素 返回被移除的元素
|
this.eventData.splice(index, 1, temp); // 在 index 位置插入之前被移除的元素
|
}
|
},
|
|
// 下移
|
moveDown(row) {
|
const index = this.findIndexByEventValue(this.eventData, row.eventValue);
|
const length = this.eventData.length;
|
if (index < length - 1) {
|
const temp = this.eventData[index];
|
this.eventData.splice(index, 1, this.eventData.splice(index + 1, 1, temp)[0]);
|
}
|
},
|
|
// 按钮设计
|
btnDesignClickHandler() {
|
if (this.selectList.length != 1) {
|
this.$message.error('请选择一条数据');
|
return;
|
}
|
console.log(this.selectList);
|
this.btnDesignVisible = true;
|
this.formBtnOid = this.selectList[0].id;
|
this.getTabBtnTree();
|
},
|
|
// 左侧树请求
|
getTabBtnTree() {
|
const params = {
|
pageDefinationOid: this.selectList[0].id
|
}
|
this.treeLoading = true;
|
getTabButtons(params).then(res => {
|
if (res.data.code === 200) {
|
const data = res.data.data;
|
this.treeData = [{
|
label: this.selectList[0].name,
|
oId: 'parentNode',
|
disabled: true,
|
children: data
|
}];
|
this.treeLoading = false;
|
} else {
|
this.$message.error('请检查控制台错误');
|
}
|
})
|
},
|
|
// 按钮设计行点击
|
nodeTreeClick(row) {
|
this.nodeTreeRow = row;
|
this.basicForm = {...row};
|
this.paramsData = row.buttonParams ? Object.entries(row.buttonParams).map(([key, value]) => ({
|
name: key,
|
value: value
|
})) : [];
|
this.disabledBtn = true;
|
},
|
|
// 按钮设计参数信息删除
|
paramsRowDeleteHandler(row) {
|
this.paramsData.splice(row.$index, 1)
|
},
|
|
// 按钮设计信息参数信息修改
|
paramsRowEditHandler(row) {
|
this.$refs.paramsCrud.rowEdit(row,row.$index);
|
},
|
|
// 按钮设计参数信息添加按钮
|
paramsRowAddClickHandler() {
|
this.$refs.paramsCrud.rowAdd();
|
},
|
|
// 按钮设计参数信息修改保存
|
paramsRowUpdate(row, index, done, loading) {
|
console.log(row,index);
|
this.paramsData.splice(index, 1, row);
|
done();
|
},
|
|
// 按钮设计参数信息保存
|
paramsRowSave(row, done, loading) {
|
if (!row.name) {
|
this.$message.error('名称不能为空');
|
return loading();
|
}
|
|
if (!row.value) {
|
this.$message.error('值不能为空');
|
return loading();
|
}
|
|
this.paramsData.push(row);
|
done();
|
},
|
|
// 按钮设计添加
|
addClickBtnHandler() {
|
if (func.isEmptyObject(this.nodeTreeRow)) {
|
this.$message.error('请选择节点进行添加');
|
return;
|
}
|
this.disabledBtn = false;
|
this.basicForm = {};
|
this.paramsData = [];
|
this.saveType = 'add';
|
},
|
|
// 按钮设计修改
|
editClickBtnHandler() {
|
if (func.isEmptyObject(this.nodeTreeRow)) {
|
this.$message.error('请选择节点进行修改');
|
return;
|
}
|
|
if (this.nodeTreeRow.oId === "parentNode") {
|
this.$message.error('顶层节点不允许修改');
|
return;
|
}
|
|
this.disabledBtn = false;
|
this.saveType = 'edit';
|
},
|
|
// 按钮设计取消
|
escClickBtnHandler() {
|
this.disabledBtn = true;
|
if (this.saveType === 'add') {
|
this.$refs.Tree.setCurrentKey(null);
|
}
|
},
|
|
// 按钮设计保存
|
saveClickBtnHandler() {
|
this.dialogLoading = true;
|
const saveFunction = this.saveType === 'add' ? addTapButton : updateTapButton;
|
const bottomParams = {};
|
if (this.paramsData.length > 0) {
|
this.paramsData.forEach(item => {
|
bottomParams[item.name] = item.value
|
})
|
}
|
|
const params = this.saveType === 'add' ? {
|
...this.basicForm,
|
parentId: this.nodeTreeRow.oId === 'parentNode' ? '' : this.nodeTreeRow.parentId,
|
buttonParams: bottomParams,
|
tableOId: this.selectList[0].id
|
} : {
|
...this.basicForm,
|
buttonParams: bottomParams
|
}
|
|
saveFunction(params).then(res => {
|
if (res.data.code === 200) {
|
this.$message.success(res.data.obj);
|
this.disabledBtn = true;
|
this.getTabBtnTree();
|
this.basicForm = {};
|
this.paramsData = [];
|
this.dialogLoading = false;
|
}
|
}).catch(err => {
|
this.dialogLoading = false;
|
})
|
},
|
|
// 按钮设计删除
|
delClickBtnHandler() {
|
if (func.isEmptyObject(this.nodeTreeRow)) {
|
this.$message.error('请选择节点进行删除');
|
return;
|
}
|
|
if (this.nodeTreeRow.oId === "parentNode") {
|
this.$message.error('顶层节点不允许删除');
|
return;
|
}
|
|
this.$confirm('您确定要删除所选择的数据吗？', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => {
|
deleteTabButton(this.nodeTreeRow).then(res => {
|
// console.log(res);
|
if (res.data.code === 200) {
|
this.$message.success('删除成功');
|
this.getTabBtnTree();
|
this.basicForm = {};
|
this.paramsData = [];
|
}
|
})
|
}).catch(() => {
|
this.$message({
|
type: 'info',
|
message: '已取消删除'
|
});
|
});
|
},
|
|
// 复制到其他组件
|
cloneClickBtnHandler() {
|
if (func.isEmptyObject(this.nodeTreeRow)) {
|
this.$message.error('请选择节点进行复制');
|
return;
|
}
|
if (this.nodeTreeRow.oId === "parentNode") {
|
this.$message.error('顶层节点不允许复制');
|
return;
|
}
|
this.sourceBtnOid = this.nodeTreeRow.oId;
|
this.$refs.cloneBtnDialog.openDialog(this.nodeTreeRow);
|
},
|
|
// 选择action
|
actionFoucus() {
|
this.$refs.actionDialog.openDialog();
|
},
|
|
// 保存action
|
actionSaveHandler(val) {
|
this.$set(this.basicForm, 'actionName', val.plName);
|
this.$set(this.basicForm, 'actionOId', val.plOId);
|
},
|
|
// 打开克隆对话框
|
rowCloneHandler(row) {
|
console.log(row);
|
this.fromOid = this.sourceData.plOId;
|
this.sourceOId = row.id;
|
this.$refs.cloneDialog.openDialog(row);
|
},
|
|
// 调整为下级按钮
|
changeBottomBtnHandler() {
|
if (func.isEmptyObject(this.nodeTreeRow)) {
|
this.$message.error('请选择节点进行修改');
|
return;
|
}
|
|
if (this.nodeTreeRow.oId === "parentNode") {
|
this.$message.error('顶层节点不允许调整');
|
return;
|
}
|
joinBtn(this.nodeTreeRow).then(res => {
|
// console.log(res);
|
if (res.data.code === 200) {
|
this.$message.success(res.data.obj);
|
this.getTabBtnTree();
|
}
|
})
|
},
|
|
// 调整为上级按钮
|
changeTopBtnHandler() {
|
if (func.isEmptyObject(this.nodeTreeRow)) {
|
this.$message.error('请选择节点进行修改');
|
return;
|
}
|
|
if (this.nodeTreeRow.oId === "parentNode") {
|
this.$message.error('顶层节点不允许调整');
|
return;
|
}
|
exitBtn(this.nodeTreeRow).then(res => {
|
if (res.data.code === 200) {
|
this.$message.success(res.data.obj);
|
this.getTabBtnTree();
|
}
|
})
|
}
|
},
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.el-divider__text, .el-link {
|
font-size: 16px !important;
|
}
|
</style>
|
