| | |
| | | <template> |
| | | <basic-container> |
| | | <div> |
| | | <avue-crud |
| | | ref="crud" |
| | | v-model="form" |
| | | :before-close="beforeClose" |
| | | :before-open="beforeOpen" |
| | | :data="data" |
| | | :option="option" |
| | | :table-loading="tableLoading" |
| | | @row-del="rowDelHandler" |
| | | @row-save="rowSaveHandler" |
| | | @row-update="rowUpdateHandler" |
| | | @refresh-change="handleRefresh" |
| | | @selection-change="selectChangeHandler" |
| | | @row-click="rowClickHandler"> |
| | | <template slot="menuLeft" slot-scope="scope"> |
| | | <el-button icon="el-icon-plus" plain size="small" type="primary" |
| | | <el-button v-if="permissionChildrenList.UiPageLayoutAddBtn" 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> |
| | | |
| | | <!-- eventKey操作按钮 --> |
| | | <template slot="eventButtonForm" slot-scope="scope"> |
| | | <div style="width: 100%;display: flex;justify-content: center"> |
| | | <el-button plain size="mini" type="primary" @click="formDataAddClickHandler">创建</el-button> |
| | | <el-button plain size="mini" type="danger" @click="formDataDelClickHandler">删除</el-button> |
| | | <el-button plain size="mini" type="primary" @click="moveUp">上移</el-button> |
| | | <el-button plain size="mini" type="primary" @click="moveDown">下移</el-button> |
| | | </div> |
| | | <template slot="menu" slot-scope="scope"> |
| | | <el-button v-if="permissionChildrenList.UiPageLayoutDesignBtn" icon="el-icon-edit-outline" size="small" type="text" |
| | | @click="btnDesignClickHandler(scope.row)">按钮设计 |
| | | </el-button> |
| | | <el-button v-if="permissionChildrenList.UiPageLayoutEditBtn" icon="el-icon-edit" size="small" type="text" @click="editBtnClick(scope.row)">编辑 |
| | | </el-button> |
| | | <el-button v-if="permissionChildrenList.UiPageLayoutDelBtn" icon="el-icon-delete" size="small" type="text" @click="rowDeleteHandler(scope.row)">删除 |
| | | </el-button> |
| | | <el-button v-if="permissionChildrenList.UiPageLayoutCloneBtn" icon="el-icon-document-copy" size="small" type="text" @click="rowCloneHandler(scope.row)">克隆 |
| | | </el-button> |
| | | </template> |
| | | |
| | | <!-- eventKey以及eventValue显示区域 --> |
| | | <template slot="bottomValueForm" slot-scope="scope"> |
| | | <div style="height: 200px; width: 95%; border: 1px solid #bdbbbb;overflow-y: auto"> |
| | | <!-- 内容 --> |
| | | <el-table |
| | | :data="FormData" |
| | | :highlight-current-row="true" |
| | | style="width: 100%" |
| | | @row-click="formDataRowClick"> |
| | | <el-table-column |
| | | align="center" |
| | | label="EventKey" |
| | | prop="eventKey"> |
| | | </el-table-column> |
| | | <el-table-column |
| | | align="center" |
| | | label="EventValue" |
| | | prop="eventValue"> |
| | | </el-table-column> |
| | | </el-table> |
| | | </div> |
| | | <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切换 --> |
| | |
| | | <span v-else-if="form.searchTarger === '1'">源对象</span> |
| | | <span v-else-if="form.searchTarger === '2'">目标对象</span> |
| | | </template> |
| | | |
| | | <template slot="extAttrLabel" slot-scope="{}"> |
| | | <el-tooltip placement="top"> |
| | | <div slot="content">示例:ext1:xx;ext2;ext3:xx;ext4:xxx;extn:xxx; |
| | | <br/>1、用英交半角分号:分隔各组值; |
| | | <br/>2、每组用英交半角冒号:分隔单一扩展属性名称及属性值; |
| | | <br/>3、可以定义任意组,但总字符长度不得超过4000; |
| | | <br/>4、输入时,不要敲回车换行; |
| | | </div> |
| | | <span>扩展属性 <i class="el-icon-warning" style="color:red;"></i> </span> |
| | | </el-tooltip> |
| | | </template> |
| | | |
| | | <template slot="uiParserLabel" slot-scope="{}"> |
| | | <el-tooltip placement="top"> |
| | | <div slot="content">示例:java_cs;xxx.java_bs;xxx.net_cs;xxxx.net_bs;xxx.mobile_cs;xx.mobile_bs;xxx; |
| | | <br/>1、用英文半角分号;分割各组值;(这里结尾的是中文字符的分号) |
| | | <br/>2、每组用英文半角冒号:分隔单一扩展属性名称及属性值; |
| | | <br/>3、其中的xxx是各种解析类的完整类型名称(完全限定名); |
| | | <br/>4、输入时,不要敲回车换行; |
| | | </div> |
| | | <span>UI解析类型 <i class="el-icon-warning" style="color:red;"></i> </span> |
| | | </el-tooltip> |
| | | </template> |
| | | |
| | | <template slot="templateIdForm" slot-scope="{}"> |
| | | <el-select v-model="form.templateId" filterable placeholder="请选择"> |
| | | <el-option |
| | | v-for="item in templateIdList" |
| | | :key="item.viName" |
| | | :label="item.viName" |
| | | :value="item.viName"> |
| | | </el-option> |
| | | </el-select> |
| | | </template> |
| | | |
| | | <template slot="queryTemplateNameForm" slot-scope="{}"> |
| | | <el-select v-model="form.queryTemplateName" filterable placeholder="请选择"> |
| | | <el-option |
| | | v-for="item in queryTemplateNameList" |
| | | :key="item.qtName" |
| | | :label="item.qtName" |
| | | :value="item.qtName"> |
| | | </el-option> |
| | | </el-select> |
| | | </template> |
| | | </avue-crud> |
| | | <el-dialog |
| | | v-dialogDrag |
| | |
| | | append-to-body="true" |
| | | class="avue-dialog" |
| | | title="配置按钮" |
| | | width="75%" |
| | | @close="dialogClose"> |
| | | width="1200px" |
| | | @close="$refs.form.clearValidate();disabledBtn=true;"> |
| | | <el-container v-loading="dialogLoading"> |
| | | <el-header style="height: 40px !important;"> |
| | | <el-header style="height: 40px !important;padding-left: 5px;"> |
| | | <div style="display: flex"> |
| | | <el-button :disabled="!disabledBtn" plain size="mini" type="primary" @click="addClickBtnHandler">添加 |
| | | <el-button v-show="disabledBtn" :disabled="!disabledBtn" plain size="mini" type="primary" @click="addClickBtnHandler">添加 |
| | | </el-button> |
| | | <el-button :disabled="!disabledBtn" plain size="mini" type="primary" @click="editClickBtnHandler">修改 |
| | | <el-button v-show="disabledBtn" :disabled="!disabledBtn" plain size="mini" type="primary" @click="editClickBtnHandler">修改 |
| | | </el-button> |
| | | <el-button :disabled="!disabledBtn" plain size="mini" type="danger" @click="delClickBtnHandler">删除 |
| | | <el-button v-show="disabledBtn" :disabled="!disabledBtn" plain size="mini" type="danger" @click="delClickBtnHandler">删除 |
| | | </el-button> |
| | | <el-button :disabled="disabledBtn" plain size="mini" type="primary" @click="saveClickBtnHandler">保存 |
| | | <el-button v-show="!disabledBtn" :disabled="disabledBtn" plain size="mini" icon="el-icon-check" type="success" @click="saveClickBtnHandler">保存 |
| | | </el-button> |
| | | <el-button :disabled="disabledBtn" plain size="mini" type="primary" @click="escClickBtnHandler">取消 |
| | | <el-button v-show="!disabledBtn" :disabled="disabledBtn" plain size="mini" icon="el-icon-close" type="danger" @click="escClickBtnHandler">取消 |
| | | </el-button> |
| | | <el-button plain size="mini" type="primary">调整为下级按钮</el-button> |
| | | <el-button plain size="mini" type="primary">调整为上级按钮</el-button> |
| | | <el-button plain size="mini" type="primary">复制到其他组件</el-button> |
| | | <el-button v-show="disabledBtn" plain size="mini" type="primary" @click="changeBottomBtnHandler">调整为下级按钮</el-button> |
| | | <el-button v-show="disabledBtn" plain size="mini" type="primary" @click="changeTopBtnHandler">调整为上级按钮</el-button> |
| | | <el-button v-show="disabledBtn" plain size="mini" type="primary" @click="cloneClickBtnHandler">复制到其他组件</el-button> |
| | | </div> |
| | | </el-header> |
| | | <el-container> |
| | | <el-aside width="20%"> |
| | | <el-aside width="25%"> |
| | | <basic-container> |
| | | <div style="height:650px;"> |
| | | <avue-tree |
| | |
| | | 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 style="display: flex"> |
| | | <i v-if="data.oId=='parentNode'" class="iconShow el-icon-s-home"></i> |
| | | <icon-show v-else :name="data.iconPath"></icon-show> |
| | | {{ (node || {}).label }} |
| | | </span> |
| | | </span> |
| | | </avue-tree> |
| | |
| | | <el-main> |
| | | <basic-container> |
| | | <el-divider content-position="left">基础信息</el-divider> |
| | | <el-form ref="form" :model="basicForm" :rules="rules" label-width="90px" size="small" |
| | | <el-form ref="form" :model="basicForm" :rules="rules" label-width="100px" 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"> |
| | | <el-input v-model="basicForm.actionName" :readonly="disabledBtn" @focus="actionFoucus"></el-input> |
| | | </el-col> |
| | | </el-form-item> |
| | | <el-col :span="12"> |
| | | <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-col> |
| | | |
| | | <el-col :span="12"> |
| | | <el-form-item label="是否授权:" prop="resource"> |
| | | <el-form-item :inline-message='true' label="名称:" prop="label"> |
| | | <el-input v-model="basicForm.label" :disabled="disabledBtn"></el-input> |
| | | </el-form-item> |
| | | </el-col> |
| | | |
| | | <el-col :span="12"> |
| | | <el-form-item label="Action:" prop="actionName"> |
| | | <el-input v-model="basicForm.actionName" :disabled="disabledBtn" :clearable="true" @focus="actionFoucus" @clear="clearActionValue"> |
| | | <i slot="suffix" class="el-input__icon el-icon-search" style="cursor: pointer" @click="actionFoucus"></i> |
| | | </el-input> |
| | | </el-form-item> |
| | | </el-col> |
| | | |
| | | <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="24"> |
| | | </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-form-item> |
| | | </el-col> |
| | | |
| | | <el-col :span="12"> |
| | | <el-col :span="12" v-show="basicForm.show=='0'"> |
| | | <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-radio v-model="basicForm.displayMode" :disabled="disabledBtn" label="textandimage">文字和图标</el-radio> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="24" v-show="basicForm.show=='0' && (basicForm.displayMode=='image'||basicForm.displayMode=='textandimage')"> |
| | | <el-form-item label="图标:" prop="iconPath"> |
| | | <input-icon v-model="basicForm.iconPath" :disabled="disabledBtn"></input-icon> |
| | | </el-form-item> |
| | | </el-col> |
| | | |
| | | <el-col :span="12"> |
| | | <el-col :span="24"> |
| | | <el-form-item label="提示信息:" prop="desc"> |
| | | <el-input v-model="basicForm.desc" :readonly="disabledBtn" type="textarea"></el-input> |
| | | <el-input v-model="basicForm.desc" :disabled="disabledBtn" type="textarea"></el-input> |
| | | </el-form-item> |
| | | </el-col> |
| | | |
| | |
| | | <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-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">创建 |
| | |
| | | </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> |
| | |
| | | </el-container> |
| | | </el-container> |
| | | </el-dialog> |
| | | <el-dialog |
| | | v-dialogDrag |
| | | :visible.sync="btnActionVisible" |
| | | append-to-body="true" |
| | | class="avue-dialog" |
| | | title="选择Action" |
| | | width="70%"> |
| | | <action-dialog></action-dialog> |
| | | </el-dialog> |
| | | </basic-container> |
| | | <action-dialog ref="actionDialog" @cancelAction="actionCancelHandler" @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 func from "@/util/func"; |
| | | import { |
| | | getPLPageDefinations, |
| | | getBtmDatasByPage, |
| | | getPortalVIDatasByPage, |
| | | getQTInfoDatasByPage, |
| | | getTabButtons, |
| | | addTapButton, |
| | | updateTapButton, getTabByContextIdAndType |
| | | updateTapButton, |
| | | addPageDefination, |
| | | deleteTabButton, |
| | | delPageDefination, |
| | | joinBtn, |
| | | exitBtn, |
| | | updatePageDefination, |
| | | getPortalVIDatasByPage, |
| | | getQTInfoDatasByPage |
| | | } from "@/api/UI/uiDefine"; |
| | | import actionDialog from '@/views/modelingMenu/ui/uiDefine/rightRegion/bottomTable/components/action'; |
| | | import actionDialog from '@/views/modelingMenu/ui/Aciton/components/dialog'; |
| | | import cloneDialog from "@/views/modelingMenu/ui/uiDefine/rightRegion/cloneDialog"; |
| | | import {mapGetters} from "vuex"; |
| | | |
| | | export default { |
| | | props: { |
| | | sourceData: { |
| | | type: Object, |
| | | default: () => {} |
| | | default: () => { |
| | | } |
| | | }, |
| | | height: { |
| | | type: String, |
| | |
| | | } |
| | | }, |
| | | components: { |
| | | actionDialog |
| | | actionDialog, |
| | | cloneDialog |
| | | }, |
| | | name: "index", |
| | | data() { |
| | | return { |
| | | queryTemplateNameList: [], |
| | | templateIdList: [], |
| | | searchTargerChangeFlag: false, |
| | | showTypeChangeFlag: false, |
| | | linkTypeChangeFlag: false, |
| | | 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: '', |
| | |
| | | editBtn: false, |
| | | delBtn: false, |
| | | refreshBtn: false, |
| | | dialogWidth:'600', |
| | | menuWidth:'150', |
| | | column: [ |
| | | { |
| | | label: '名称', |
| | | prop: 'name' |
| | | prop: 'name', |
| | | width:180, |
| | | span: 24, |
| | | rules: [ |
| | | { |
| | | required: true, |
| | | message: '请输入名称', |
| | | trigger: 'blur' |
| | | } |
| | | ] |
| | | }, |
| | | { |
| | | label: '值', |
| | | prop: 'value' |
| | | prop: 'value', |
| | | type:'textarea', |
| | | span: 24, |
| | | rules: [ |
| | | { |
| | | required: true, |
| | | message: '请输入值', |
| | | trigger: 'blur' |
| | | } |
| | | ] |
| | | } |
| | | ] |
| | | }, |
| | |
| | | ], |
| | | label: [ |
| | | {required: true, message: '请输入名称', trigger: 'blur'}, |
| | | ], |
| | | actionName: [ |
| | | {required: true, message: '请选择Action', trigger: 'blur'}, |
| | | ], |
| | | }, |
| | | // 按钮设计 基础信息 |
| | |
| | | data: [], |
| | | option: { |
| | | ...basicOption, |
| | | size:'mini', |
| | | height: this.height, |
| | | addBtn: false, |
| | | index: true, |
| | | calcHeight: -30, |
| | | editBtn: false, |
| | | delBtn: false, |
| | | menuWidth:300, |
| | | column: [ |
| | | { |
| | | label: '名称', |
| | | prop: 'name', |
| | | width: 220, |
| | | labelWidth: 110, |
| | | rules: [ |
| | | { |
| | | required: true, |
| | |
| | | { |
| | | label: '编号', |
| | | prop: 'seq', |
| | | width:100, |
| | | labelWidth: 110, |
| | | hide: false, |
| | | rules: [ |
| | | { |
| | |
| | | label: 'UI解析类型', |
| | | prop: 'uiParser', |
| | | hide: true, |
| | | labelWidth: 110, |
| | | }, |
| | | { |
| | | label: '扩展属性', |
| | | prop: 'extAttr', |
| | | hide: true, |
| | | labelWidth: 110, |
| | | }, |
| | | { |
| | | label: '描述', |
| | | prop: 'description', |
| | | labelWidth: 110, |
| | | hide: false, |
| | | }, |
| | | { |
| | | label: '模板类型', |
| | | prop: 'templateType', |
| | | type: 'radio', |
| | | labelWidth: 110, |
| | | span: 24, |
| | | value: '1', |
| | | dicData: [ |
| | |
| | | return val; |
| | | }, |
| | | change: (val) => { |
| | | console.log(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; // 切换默认展示搜索类型 |
| | | // 模板类型为表格 |
| | |
| | | label: '显示类型', |
| | | prop: 'navigatorType', |
| | | type: 'radio', |
| | | labelWidth: 110, |
| | | span: 24, |
| | | value: '1', |
| | | hide: true, |
| | |
| | | label: '搜索类型', |
| | | prop: 'searchTarger', |
| | | display: true, |
| | | labelWidth: 110, |
| | | type: 'radio', |
| | | value: '1', |
| | | span: 24, |
| | |
| | | const obj = this.option.group[0].column.find(item => item.prop === 'linkType'); |
| | | obj.display = val.value !== '1'; |
| | | } |
| | | |
| | | if (this.searchTargerChangeFlag) { |
| | | // 切换清空模板类型 |
| | | const list = ['showType', 'linkType', 'templateId', 'SubUILayout', 'queryTemplateName', 'searchObjType', 'bsDataModel', 'csDataModel']; |
| | | list.forEach(item => { |
| | | this.form[item] = ''; |
| | | }) |
| | | } else { |
| | | this.searchTargerChangeFlag = true; |
| | | } |
| | | } |
| | | }, |
| | | { |
| | | label: '描述', |
| | | prop: 'description', |
| | | display: false |
| | | }, |
| | | ], |
| | | group: [ |
| | | { |
| | | icon: 'el-icon-folder-opened', |
| | | label: '', |
| | | arrow: false, |
| | | icon:'el-icon-info', |
| | | label:'', |
| | | arrow: true, |
| | | prop: 'group1', |
| | | column: [ |
| | | { |
| | | label: '源对象', |
| | | prop: 'showType', |
| | | type: 'table', |
| | | display: false, |
| | | type: 'select', |
| | | labelWidth: 115, |
| | | cascader: ['linkType', 'SubUILayout', 'searchObjType'], |
| | | placeholder: "请输入内容", |
| | | props: { |
| | | label: 'name', |
| | | value: 'name' |
| | | }, |
| | | children: { |
| | | border: true, |
| | | column: [{ |
| | | label: '名称', |
| | | search: true, |
| | | searchSpan: 24, |
| | | prop: 'name' |
| | | }, { |
| | | label: '标签', |
| | | prop: 'label' |
| | | }], |
| | | }, |
| | | onLoad: ({page, value, data}, callback) => { |
| | | //page分页 |
| | | // 不管是搜索 还是首次加载都会触发page 所以只需要拿page存在与否进行请求就可以 如果再去判断data搜索 或者value初次加载就会重复请求 |
| | | if (page) { |
| | | const params = { |
| | | "conditionMap[filterInputValue]": value ? value.name : '' |
| | | }; |
| | | getBtmDatasByPage(page.currentPage, page.pageSize, params).then(res => { |
| | | callback({ |
| | | total: res.data.total, |
| | | data: res.data.data |
| | | }) |
| | | dicUrl: '/api/uiManagerController/getBtmDatasByPage?page=1&limit=-1', |
| | | filterable: true, |
| | | change: (val) => { |
| | | if (val.value) { |
| | | let params = { |
| | | 'conditionMap[selectBtmType]': this.form.searchTarger === '1' ? val.value : this.form.linkType |
| | | } |
| | | getPortalVIDatasByPage(1, -1, params).then(res => { |
| | | this.templateIdList = res.data.data; |
| | | }) |
| | | getQTInfoDatasByPage(1, -1, params).then(res => { |
| | | this.queryTemplateNameList = res.data.data; |
| | | }) |
| | | } |
| | | if (this.showTypeChangeFlag) { |
| | | if (val.value) { |
| | | if (this.form.searchTarger === '1') { |
| | | this.form.templateId = ""; |
| | | this.form.queryTemplateName = ""; |
| | | } else { |
| | | this.form.linkType = ""; |
| | | this.form.templateId = ""; |
| | | this.form.queryTemplateName = ""; |
| | | } |
| | | } |
| | | } else { |
| | | this.showTypeChangeFlag = true; |
| | | } |
| | | }, |
| | | props: { |
| | | label: 'name', |
| | | value: 'name', |
| | | desc: 'label' |
| | | }, |
| | | rules: [ |
| | | { |
| | | required: true, |
| | | message: '请选择内容', |
| | | trigger: 'change' |
| | | } |
| | | ], |
| | | }, |
| | | { |
| | | label: '链接类型', |
| | | prop: 'linkType', |
| | | type: 'table', |
| | | type: 'select', |
| | | display: false, |
| | | labelWidth: 115, |
| | | filterable: true, |
| | | props: { |
| | | label: 'viName', |
| | | value: 'viName' |
| | | label: 'name', |
| | | value: 'name', |
| | | desc: 'tag' |
| | | }, |
| | | children: { |
| | | border: true, |
| | | column: [{ |
| | | label: '名称', |
| | | search: true, |
| | | searchSpan: 24, |
| | | prop: 'viName' |
| | | }, { |
| | | label: '类型', |
| | | prop: 'viType' |
| | | }], |
| | | }, |
| | | onLoad: ({page, value, data}, callback) => { |
| | | if (page) { |
| | | const params = { |
| | | "conditionMap[selectBtmType]": this.form.showType, |
| | | "conditionMap[filterInputValue]": data ? data.viName : '', |
| | | }; |
| | | getPortalVIDatasByPage(page.currentPage, page.pageSize, params).then(res => { |
| | | console.log(res); |
| | | callback({ |
| | | total: res.data.total, |
| | | data: res.data.data |
| | | }) |
| | | dicUrl: '/api/uiManagerController/getLinkDatasByPage?page=1&limit=-1&conditionMap[selectBtmType]={{key}}', |
| | | change: (val) => { |
| | | if (val.value) { |
| | | let params = { |
| | | 'conditionMap[selectBtmType]': val.value |
| | | } |
| | | getPortalVIDatasByPage(1, -1, params).then(res => { |
| | | this.templateIdList = res.data.data; |
| | | }) |
| | | getQTInfoDatasByPage(1, -1, params).then(res => { |
| | | this.queryTemplateNameList = res.data.data; |
| | | }) |
| | | } |
| | | }, |
| | | if (this.linkTypeChangeFlag) { |
| | | if (val.value) { |
| | | this.form.templateId = ""; |
| | | this.form.queryTemplateName = ""; |
| | | } |
| | | } else { |
| | | this.linkTypeChangeFlag = true; |
| | | } |
| | | } |
| | | }, |
| | | { |
| | | label: '选择模板', |
| | | prop: 'showTypea', |
| | | prop: 'templateId', |
| | | labelWidth: 115, |
| | | display: false, |
| | | type: 'table', |
| | | props: { |
| | | label: 'viName', |
| | | value: 'viName' |
| | | }, |
| | | children: { |
| | | border: true, |
| | | column: [{ |
| | | label: '名称', |
| | | search: true, |
| | | searchSpan: 24, |
| | | prop: 'viName' |
| | | }, { |
| | | label: '类型', |
| | | prop: 'viType' |
| | | }], |
| | | }, |
| | | onLoad: ({page, value, data}, callback) => { |
| | | if (page) { |
| | | const params = { |
| | | "conditionMap[selectBtmType]": this.form.showType, |
| | | "conditionMap[filterInputValue]": data ? data.viName : '', |
| | | }; |
| | | getPortalVIDatasByPage(page.currentPage, page.pageSize, params).then(res => { |
| | | console.log(res); |
| | | callback({ |
| | | total: res.data.total, |
| | | data: res.data.data |
| | | }) |
| | | }) |
| | | formslot: true, |
| | | rules: [ |
| | | { |
| | | required: true, |
| | | message: '请选择模板', |
| | | trigger: 'submit' |
| | | } |
| | | }, |
| | | ], |
| | | }, |
| | | { |
| | | label: 'UI定义', |
| | | prop: 'UI', |
| | | type: 'table', |
| | | prop: 'SubUILayout', |
| | | type: 'select', |
| | | labelWidth: 115, |
| | | filterable: true, |
| | | display: false, |
| | | props: { |
| | | label: 'qtName', |
| | | value: 'qtName' |
| | | label: 'plName', |
| | | value: 'plCode', |
| | | }, |
| | | children: { |
| | | border: true, |
| | | column: [{ |
| | | label: '名称', |
| | | search: true, |
| | | searchSpan: 24, |
| | | prop: 'qtName' |
| | | }, { |
| | | label: '类型', |
| | | prop: 'btmName' |
| | | }], |
| | | }, |
| | | onLoad: ({page, value, data}, callback) => { |
| | | if (page) { |
| | | const params = { |
| | | "conditionMap[selectBtmType]": this.form.showType, |
| | | "conditionMap[filterInputValue]": data ? data.qtName : '', |
| | | }; |
| | | getQTInfoDatasByPage(page.currentPage, page.pageSize, params).then(res => { |
| | | callback({ |
| | | total: res.data.total, |
| | | data: res.data.data |
| | | }) |
| | | }) |
| | | } |
| | | }, |
| | | dicUrl: '/api/uiManagerController/getUILayoutDatasByPage?page=1&limit=-1&conditionMap[selectBtmType]={{key}}', |
| | | }, |
| | | { |
| | | label: '查询类型', |
| | | prop: 'searchType', |
| | | display: false, |
| | | value: '1', |
| | | type: 'radio', |
| | | labelWidth: 115, |
| | | span: 24, |
| | | dicData: [ |
| | | { |
| | |
| | | { |
| | | label: '查询对象类型', |
| | | prop: 'searchObjType', |
| | | type: 'table', |
| | | type: 'select', |
| | | display: false, |
| | | labelWidth: 100, |
| | | labelWidth: 115, |
| | | props: { |
| | | label: 'qtName', |
| | | value: 'qtName' |
| | | value: 'qtName', |
| | | desc: 'btmName' |
| | | }, |
| | | children: { |
| | | border: true, |
| | | column: [{ |
| | | label: '名称', |
| | | search: true, |
| | | searchSpan: 24, |
| | | prop: 'qtName' |
| | | }, { |
| | | label: '类型', |
| | | prop: 'btmName' |
| | | }], |
| | | }, |
| | | onLoad: ({page, value, data}, callback) => { |
| | | if (page) { |
| | | const params = { |
| | | "conditionMap[selectBtmType]": this.form.showType, |
| | | "conditionMap[filterInputValue]": data ? data.qtName : '', |
| | | }; |
| | | getQTInfoDatasByPage(page.currentPage, page.pageSize, params).then(res => { |
| | | callback({ |
| | | total: res.data.total, |
| | | data: res.data.data |
| | | }) |
| | | }) |
| | | } |
| | | }, |
| | | dicUrl: '/api/uiManagerController/getLinkDatasByPage?page=1&limit=-1&conditionMap[selectBtmType]=',// cs端有问题 暂时不展示内容 |
| | | }, |
| | | { |
| | | label: '查询模板', |
| | | prop: 'showTypes', |
| | | type: 'table', |
| | | prop: 'queryTemplateName', |
| | | labelWidth: 115, |
| | | type: 'select', |
| | | display: false, |
| | | props: { |
| | | label: 'qtName', |
| | | value: 'qtName' |
| | | }, |
| | | children: { |
| | | border: true, |
| | | column: [{ |
| | | label: '名称', |
| | | search: true, |
| | | searchSpan: 24, |
| | | prop: 'qtName' |
| | | }, { |
| | | label: '类型', |
| | | prop: 'btmName' |
| | | }], |
| | | }, |
| | | onLoad: ({page, value, data}, callback) => { |
| | | if (page) { |
| | | const params = { |
| | | "conditionMap[selectBtmType]": this.form.showType, |
| | | "conditionMap[filterInputValue]": data ? data.qtName : '', |
| | | }; |
| | | getQTInfoDatasByPage(page.currentPage, page.pageSize, params).then(res => { |
| | | callback({ |
| | | total: res.data.total, |
| | | data: res.data.data |
| | | }) |
| | | }) |
| | | } |
| | | }, |
| | | formslot: true, |
| | | }, |
| | | { |
| | | label: '控制路径', |
| | | prop: 'kzlj', |
| | | prop: 'controlPath', |
| | | labelWidth: 115, |
| | | display: false, |
| | | type: 'textarea', |
| | | span: 24, |
| | | rows: 3 |
| | | }, |
| | | { |
| | | label: '根节点显示表达式', |
| | | prop: 'genjiedian', |
| | | label: '树结构展开列', |
| | | prop: 'expandCols', |
| | | labelWidth: 115, |
| | | display: false, |
| | | labelWidth: 135, |
| | | span: 24 |
| | | }, |
| | | { |
| | | label: '树节点显示表达式', |
| | | prop: 'shujiedian', |
| | | display: false, |
| | | labelWidth: 135, |
| | | span: 24 |
| | | span: 12 |
| | | }, |
| | | { |
| | | label: '参照树设置', |
| | | prop: 'canzhaoshu', |
| | | prop: 'showLinkAbs', |
| | | labelWidth: 115, |
| | | display: false, |
| | | }, |
| | | { |
| | | label: '分隔符', |
| | | prop: 'fgf', |
| | | prop: 'separator', |
| | | labelWidth: 115, |
| | | display: false, |
| | | }, |
| | | { |
| | | label: '展开方式', |
| | | prop: 'zkfs', |
| | | prop: 'expandMode', |
| | | display: false, |
| | | type: 'radio', |
| | | labelWidth: 115, |
| | | value: '1', |
| | | dicData: [ |
| | | { |
| | | label: '逐级展开', |
| | |
| | | }, |
| | | { |
| | | label: '全部展开', |
| | | value: '2' |
| | | value: '0' |
| | | } |
| | | ] |
| | | }, |
| | | { |
| | | label: 'B/S自定义查询', |
| | | prop: 'bsDataModel', |
| | | display: false, |
| | | labelWidth: 115, |
| | | span: 12 |
| | | }, |
| | | { |
| | | label: 'C/S自定义查询', |
| | | prop: 'csDataModel', |
| | | display: false, |
| | | labelWidth: 115, |
| | | span: 12 |
| | | }, |
| | | { |
| | | label: '根节点显示表达式', |
| | | prop: 'rootContent', |
| | | display: false, |
| | | labelWidth: 135, |
| | | span: 12 |
| | | }, |
| | | { |
| | | label: '树节点显示表达式', |
| | | prop: 'showAbs', |
| | | display: false, |
| | | labelWidth: 135, |
| | | span: 12 |
| | | }, |
| | | ] |
| | | }, |
| | | { |
| | | icon: 'el-icon-folder-opened', |
| | | label: '', |
| | | arrow: false, |
| | | prop: 'group2', |
| | | column: [ |
| | | { |
| | | label: 'EventKey', |
| | | prop: 'eventKey', |
| | | type: 'select', |
| | | value: 'SelectionEvent', |
| | | dicData: [ |
| | | { |
| | | label: 'SelectionEvent', |
| | | value: 'SelectionEvent' |
| | | }, |
| | | { |
| | | label: 'DBClickEvent', |
| | | value: 'DBClickEvent' |
| | | }, |
| | | { |
| | | label: 'ClickEvent', |
| | | value: 'ClickEvent' |
| | | } |
| | | ], |
| | | }, |
| | | { |
| | | label: 'EventValue', |
| | | prop: 'eventValue', |
| | | labelWidth: 100 |
| | | }, |
| | | { |
| | | label: '', |
| | | prop: 'eventButton', |
| | | span: 24 |
| | | }, |
| | | { |
| | | label: '', |
| | | prop: 'bottomValue', |
| | | span: 24 |
| | | span: 24, |
| | | labelWidth: 10 |
| | | }, |
| | | ] |
| | | } |
| | |
| | | formDataRow: {}, |
| | | } |
| | | }, |
| | | computed:{ |
| | | ...mapGetters(["permission"]), |
| | | permissionChildrenList() { |
| | | return { |
| | | UiPageLayoutAddBtn: this.vaildData(this.permission[this.$route.query.id].UiPageLayoutAdd, false), |
| | | UiPageLayoutEditBtn: this.vaildData(this.permission[this.$route.query.id].UiPageLayoutEdit, false), |
| | | UiPageLayoutDelBtn: this.vaildData(this.permission[this.$route.query.id].UiPageLayoutDel, false), |
| | | UiPageLayoutCloneBtn: this.vaildData(this.permission[this.$route.query.id].UiPageLayoutClone, false), |
| | | UiPageLayoutDesignBtn: this.vaildData(this.permission[this.$route.query.id].UiPageLayoutDesign, false), |
| | | } |
| | | } |
| | | }, |
| | | watch: { |
| | | sourceData:{ |
| | | sourceData: { |
| | | handler(val) { |
| | | if(val && val.plOId) { |
| | | this.getTableList() |
| | | }else{ |
| | | this.data=[]; |
| | | if (val && val.plOId) { |
| | | this.getTableList(); |
| | | } else { |
| | | this.data = []; |
| | | } |
| | | }, |
| | | immediate: true, |
| | | deep:true |
| | | deep: true |
| | | } |
| | | }, |
| | | computed: {}, |
| | | methods: { |
| | | //获取列表数据 |
| | | getTableList(){ |
| | | getTableList() { |
| | | const params = { |
| | | pageContextOId:this.sourceData.plOId |
| | | pageContextOId: this.sourceData.plOId |
| | | } |
| | | getPLPageDefinations( params).then(res => { |
| | | getPLPageDefinations(params).then(res => { |
| | | this.data = res.data.data; |
| | | this.selectList=[]; |
| | | this.selectList = []; |
| | | this.$refs.crud.clearSelection(); |
| | | this.tableLoading = false; |
| | | }) |
| | | }, |
| | | |
| | | // 根据不同值区分类型 |
| | | templateTypeValueHandler(val) { |
| | | const componentMap = { |
| | |
| | | this.lastIndex = newIndex; |
| | | }, |
| | | () => { |
| | | this.selectList = []; |
| | | this.selectList = [row]; |
| | | } |
| | | ); |
| | | }, |
| | | |
| | | // 增加 |
| | | addClickHandler() { |
| | | if (!this.sourceData || !this.sourceData.plOId) { |
| | | this.$message.error('请在上方选择一条数据后进行添加'); |
| | | return; |
| | | } |
| | | this.$refs.crud.rowAdd(); |
| | | }, |
| | | |
| | | // 增加关闭对话框 清空event数组 |
| | | beforeClose(done) { |
| | | this.eventData = []; |
| | | this.showTypeChangeFlag = false; |
| | | this.linkTypeChangeFlag = false; |
| | | 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.searchTargerChangeFlag = false; |
| | | this.$refs.crud.rowEdit(row); |
| | | }, |
| | | |
| | | // 删除 |
| | | rowDeleteHandler(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 = ""; |
| | | } |
| | | const params = { |
| | | ...row, |
| | | tabPageOId: this.sourceData.plOId |
| | | } |
| | | addPageDefination(params).then(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 = ""; |
| | | } |
| | | const params = { |
| | | ...row, |
| | | tabPageOId: this.sourceData.plOId |
| | | } |
| | | updatePageDefination(params).then(res => { |
| | | if (res.data.code === 200) { |
| | | this.$message.success(res.data.obj); |
| | | this.getTableList(); |
| | | done(); |
| | | } |
| | | }).catch(err => { |
| | | loading(); |
| | | }) |
| | | }, |
| | | |
| | | // 对话框表格行点击 |
| | |
| | | |
| | | // 对话框表格添加 |
| | | formDataAddClickHandler() { |
| | | if (!this.form.eventKey) { |
| | | this.$message.error('请选择EventKey'); |
| | | return; |
| | | } |
| | | |
| | | if (!this.form.eventValue) { |
| | | this.$message.error('请输入EventValue'); |
| | | return; |
| | | } |
| | | |
| | | if (this.FormData.length >= 1) { |
| | | const eventValueStatus = this.FormData.some(item => item.eventValue === this.form.eventValue); |
| | | |
| | | if (eventValueStatus) { |
| | | this.$message.error('已存在相同的 EventValue,不能重复添加'); |
| | | return; |
| | | } |
| | | } |
| | | const obj = { |
| | | index: this.FormData.length, |
| | | eventKey: this.form.eventKey, |
| | | eventValue: this.form.eventValue |
| | | index: this.eventData.length, |
| | | eventKey: this.form.eventKey || 'SelectionEvent', |
| | | eventValue: this.form.eventValue, |
| | | $cellEdit: true |
| | | } |
| | | |
| | | this.FormData.push(obj); |
| | | this.eventData.push(obj); |
| | | }, |
| | | |
| | | // 对话框表格删除 |
| | | formDataDelClickHandler() { |
| | | if (func.isEmptyObject(this.formDataRow)) { |
| | | this.$message.error('请选择一条数据'); |
| | | return; |
| | | } |
| | | |
| | | this.FormData = this.FormData.filter(item => item.index !== this.formDataRow.index); |
| | | formDataDelClickHandler(row) { |
| | | this.eventData = this.eventData.filter(item => item.index !== row.index); |
| | | }, |
| | | |
| | | // 模板类型显示隐藏方法 |
| | |
| | | // 模板类型为表格 |
| | | templateTypeTable(val) { |
| | | if (!val) return; |
| | | this.updateDisplay(val, ['showType', 'showTypea', 'showTypes']); |
| | | this.updateDisplay(val, ['showType', 'templateId', 'queryTemplateName', 'bsDataModel', 'csDataModel']); |
| | | }, |
| | | |
| | | // 模板类型为自定义模板 |
| | |
| | | if (!val) return; |
| | | const searchTarger = this.option.column.find(item => item.prop === 'searchTarger'); // 获取搜索类型配置项 |
| | | searchTarger.display = false; // 不展示搜索类型 |
| | | this.updateDisplay(val, ['kzlj']); |
| | | this.updateDisplay(val, ['controlPath']); |
| | | }, |
| | | |
| | | // 模板类型为树表 |
| | | templateTypeTreeTable(val) { |
| | | if (!val) return; |
| | | this.updateDisplay(val, ['showType', 'showTypea', 'showTypes', 'zkl', 'zkfs']); |
| | | this.updateDisplay(val, ['showType', 'templateId', 'queryTemplateName', 'expandCols', 'expandMode', 'bsDataModel', 'csDataModel']); |
| | | }, |
| | | |
| | | // 模板类型为表单 |
| | | templateTypeForm(val) { |
| | | if (!val) return; |
| | | this.updateDisplay(val, ['showType', 'showTypea', 'showTypes']); |
| | | this.updateDisplay(val, ['showType', 'templateId', 'queryTemplateName', 'bsDataModel', 'csDataModel']); |
| | | }, |
| | | |
| | | // 模板类型为树 |
| | |
| | | if (!val) return; |
| | | const searchTarger = this.option.column.find(item => item.prop === 'searchTarger'); // 获取搜索类型配置项 |
| | | searchTarger.display = false; // 不展示搜索类型 |
| | | this.updateDisplay(val, ['showType', 'showTypes', 'genjiedian', 'shujiedian', 'canzhaoshu', 'fgf', 'zkfs', 'linkType']); |
| | | this.updateDisplay(val, ['showType', 'queryTemplateName', 'rootContent', 'showAbs', 'showLinkAbs', 'separator', 'expandMode', 'linkType', 'bsDataModel', 'csDataModel']); |
| | | }, |
| | | |
| | | // 模板类型为UI定义 |
| | |
| | | if (!val) return; |
| | | const searchTarger = this.option.column.find(item => item.prop === 'searchTarger'); // 获取搜索类型配置项 |
| | | searchTarger.display = false; // 不展示搜索类型 |
| | | this.updateDisplay(val, ['showType', 'UI', 'searchType', 'searchObjType', 'showTypes']); |
| | | this.updateDisplay(val, ['showType', 'SubUILayout', 'searchType', 'searchObjType', 'queryTemplateName', 'bsDataModel', 'csDataModel']); |
| | | }, |
| | | |
| | | // 查找数组中对象索引 |
| | |
| | | }, |
| | | |
| | | // 上移 |
| | | moveUp() { |
| | | const index = this.findIndexByEventValue(this.FormData, this.formDataRow.eventValue); |
| | | moveUp(row) { |
| | | const index = this.findIndexByEventValue(this.eventData, row.eventValue); |
| | | if (index > 0) { |
| | | // 使用 splice 来模拟交换 |
| | | const temp = this.FormData.splice(index - 1, 1, this.FormData[index])[0]; // 移除 index-1 的元素 并在相同位置插入 index 的元素 返回被移除的元素 |
| | | this.FormData.splice(index, 1, temp); // 在 index 位置插入之前被移除的元素 |
| | | const temp = this.eventData.splice(index - 1, 1, this.eventData[index])[0]; // 移除 index-1 的元素 并在相同位置插入 index 的元素 返回被移除的元素 |
| | | this.eventData.splice(index, 1, temp); // 在 index 位置插入之前被移除的元素 |
| | | } |
| | | }, |
| | | |
| | | // 下移 |
| | | moveDown() { |
| | | const index = this.findIndexByEventValue(this.FormData, this.formDataRow.eventValue); |
| | | const length = this.FormData.length; |
| | | moveDown(row) { |
| | | const index = this.findIndexByEventValue(this.eventData, row.eventValue); |
| | | const length = this.eventData.length; |
| | | if (index < length - 1) { |
| | | const temp = this.FormData[index]; |
| | | this.FormData.splice(index, 1, this.FormData.splice(index + 1, 1, temp)[0]); |
| | | const temp = this.eventData[index]; |
| | | this.eventData.splice(index, 1, this.eventData.splice(index + 1, 1, temp)[0]); |
| | | } |
| | | }, |
| | | |
| | | // 按钮设计关闭对话框 |
| | | dialogClose() { |
| | | |
| | | }, |
| | | |
| | | // 按钮设计 |
| | | btnDesignClickHandler() { |
| | | if (this.selectList.length !=1) { |
| | | btnDesignClickHandler(row) { |
| | | /*if (this.selectList.length != 1) { |
| | | this.$message.error('请选择一条数据'); |
| | | return; |
| | | } |
| | | }*/ |
| | | this.btnDesignVisible = true; |
| | | this.getTabBtnTree(); |
| | | this.formBtnOid = row.id; |
| | | this.getTabBtnTree(row); |
| | | }, |
| | | |
| | | // 左侧树请求 |
| | | getTabBtnTree() { |
| | | getTabBtnTree(row) { |
| | | const params = { |
| | | pageDefinationOid: this.selectList[0].id |
| | | pageDefinationOid: row && row.id ? row.id : 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', |
| | | children:data |
| | | }]; |
| | | this.treeData = [{ |
| | | label: row && row.id ? row.name : this.selectList[0].name, |
| | | oId: 'parentNode', |
| | | disabled: true, |
| | | children: data |
| | | }]; |
| | | this.treeLoading = false; |
| | | } else { |
| | | this.$message.error('请检查控制台错误'); |
| | | this.$message.error(res.data.msg); |
| | | } |
| | | }) |
| | | }, |
| | |
| | | value: value |
| | | })) : []; |
| | | this.disabledBtn = true; |
| | | this.$refs.form.clearValidate() |
| | | }, |
| | | |
| | | // 按钮设计参数信息删除 |
| | |
| | | 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) { |
| | | this.paramsData.splice(index, 1, row); |
| | | done(); |
| | | }, |
| | | |
| | | // 按钮设计参数信息保存 |
| | |
| | | |
| | | // 按钮设计保存 |
| | | 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 |
| | | }) |
| | | if (this.basicForm.show == '0' && (this.basicForm.displayMode == 'image' || this.basicForm.displayMode == 'textandimage') && this.basicForm.iconPath == '') { |
| | | this.$message.error('请选择图标'); |
| | | return; |
| | | } |
| | | ; |
| | | this.$refs.form.validate((valid, done) => { |
| | | if (valid) { |
| | | 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 |
| | | } |
| | | |
| | | const params = this.saveType === 'add' ? { |
| | | ...this.basicForm, |
| | | parentId: this.nodeTreeRow.oId === 'parentNode' ? '' : this.nodeTreeRow.parentId, |
| | | buttonParams: bottomParams |
| | | } : { |
| | | ...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; |
| | | 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; |
| | | }) |
| | | } else { |
| | | return false; |
| | | } |
| | | }).catch(err => { |
| | | this.dialogLoading = false; |
| | | }) |
| | | done(); |
| | | }); |
| | | }, |
| | | |
| | | // 按钮设计删除 |
| | |
| | | cancelButtonText: '取消', |
| | | type: 'warning' |
| | | }).then(() => { |
| | | |
| | | deleteTabButton(this.nodeTreeRow).then(res => { |
| | | if (res.data.code === 200) { |
| | | this.$message.success('删除成功'); |
| | | this.getTabBtnTree(); |
| | | this.basicForm = {}; |
| | | this.paramsData = []; |
| | | } |
| | | }) |
| | | }).catch(() => { |
| | | this.$message({ |
| | | type: 'info', |
| | |
| | | }); |
| | | }, |
| | | |
| | | // 复制到其他组件 |
| | | 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.btnActionVisible = true; |
| | | this.$refs.actionDialog.openDialog(); |
| | | }, |
| | | |
| | | // 保存action |
| | | actionSaveHandler(val) { |
| | | this.$set(this.basicForm, 'actionName', val.plName); |
| | | this.$set(this.basicForm, 'actionOId', val.plOId); |
| | | this.$refs.form.clearValidate('Action') |
| | | }, |
| | | // action选择弹窗直接关闭 |
| | | actionCancelHandler() { |
| | | if(this.basicForm.actionOId){ |
| | | this.$refs.form.clearValidate('Action') |
| | | } |
| | | }, |
| | | |
| | | //清除action |
| | | clearActionValue(){ |
| | | this.$set(this.basicForm, 'actionName', ''); |
| | | this.$set(this.basicForm, 'actionOId', ''); |
| | | }, |
| | | // 打开克隆对话框 |
| | | rowCloneHandler(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 => { |
| | | 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> |
| | | |