| | |
| | | <avue-crud |
| | | ref="crud" |
| | | v-model="form" |
| | | :before-close="beforeClose" |
| | | :before-open="beforeOpen" |
| | | :data="data" |
| | | :option="option" |
| | | :table-loading="tableLoading" |
| | |
| | | </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> |
| | | <el-button icon="el-icon-document-copy" size="small" type="text" @click="rowCloneHandler(scope.row)">克隆 |
| | | </el-button> |
| | | </template> |
| | | |
| | | <!-- eventKey以及eventValue显示区域 --> |
| | |
| | | </template> |
| | | </avue-crud> |
| | | </template> |
| | | |
| | | |
| | | <!-- 切换搜索类型 源对象 目标对象显示label切换 --> |
| | | <template slot="showTypeLabel" slot-scope="{}"> |
| | |
| | | </el-button> |
| | | <el-button :disabled="disabledBtn" plain size="mini" type="primary" @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" @click="cloneClickBtnHandler">复制到其他组件</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-form-item> |
| | | |
| | | <el-col :span="12"> |
| | | <el-form-item label="是否授权:" prop="resource"> |
| | | <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-container> |
| | | </el-dialog> |
| | | <action-dialog ref="actionDialog" @updataAction="actionSaveHandler"></action-dialog> |
| | | <clone-dialog ref="cloneDialog"></clone-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> |
| | | |
| | |
| | | import func from "@/util/func"; |
| | | import { |
| | | getPLPageDefinations, |
| | | getBtmDatasByPage, |
| | | getPortalVIDatasByPage, |
| | | getQTInfoDatasByPage, |
| | | getTabButtons, |
| | | addTapButton, |
| | | updateTapButton, |
| | | getLinkDatasByPage, |
| | | addPageDefination |
| | | addPageDefination, |
| | | deleteTabButton, |
| | | delPageDefination, |
| | | joinBtn, |
| | | exitBtn |
| | | } 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"; |
| | | |
| | | export default { |
| | |
| | | name: "index", |
| | | data() { |
| | | return { |
| | | formBtnOid: '', |
| | | sourceBtnOid: '', |
| | | sourceOId: '', |
| | | fromOid: '', |
| | | paramsForm: {}, |
| | | eventOption: { |
| | | ...basicOption, |
| | |
| | | return val; |
| | | }, |
| | | change: (val) => { |
| | | const list = ['showType' ,'linkType' ,'templateId', 'SubUILayout' , 'searchObjType' ,'queryTemplateName', 'controlPath' ,'expandCols', 'rootContent', 'showAbs' ,'showLinkAbs' ,'separator'] |
| | | const list = ['showType', 'linkType', 'templateId', 'SubUILayout', 'searchObjType', 'queryTemplateName', 'controlPath', 'expandCols', 'rootContent', 'showAbs', 'showLinkAbs', 'separator'] |
| | | list.forEach(item => { |
| | | this.form[item] = ""; |
| | | }) |
| | |
| | | { |
| | | label: '源对象', |
| | | prop: 'showType', |
| | | type: 'table', |
| | | display: false, |
| | | type: 'select', |
| | | cascader: ['linkType', 'templateId', 'SubUILayout', 'searchObjType', 'queryTemplateName'], |
| | | placeholder: "请输入内容", |
| | | dicUrl: '/api/uiManagerController/getBtmDatasByPage?page=1&limit=-1', |
| | | filterable: true, |
| | | props: { |
| | | label: 'name', |
| | | value: 'name' |
| | | value: 'name', |
| | | desc: 'label' |
| | | }, |
| | | rules: [ |
| | | { |
| | |
| | | trigger: 'change' |
| | | } |
| | | ], |
| | | children: { |
| | | border: true, |
| | | column: [{ |
| | | label: '名称', |
| | | search: true, |
| | | searchSpan: 24, |
| | | prop: 'name' |
| | | }, { |
| | | label: '标签', |
| | | prop: 'label' |
| | | }], |
| | | }, |
| | | change: (val) => { |
| | | const list = ['linkType', 'templateId', 'SubUILayout', 'queryTemplateName', 'searchObjType']; |
| | | list.forEach(item => { |
| | | this.form[item] = ''; |
| | | }) |
| | | }, |
| | | onLoad: ({page, value, data}, callback) => { |
| | | //page分页 |
| | | // 不管是搜索 还是首次加载都会触发page 所以只需要拿page存在与否进行请求就可以 如果再去判断data搜索 或者value初次加载就会重复请求 |
| | | if (page) { |
| | | const params = { |
| | | "conditionMap[filterInputValue]": data ? data.name : '' |
| | | }; |
| | | getBtmDatasByPage(page.currentPage, page.pageSize, params).then(res => { |
| | | callback({ |
| | | total: res.data.total, |
| | | data: res.data.data |
| | | }) |
| | | }) |
| | | } |
| | | }, |
| | | }, |
| | | { |
| | | label: '链接类型', |
| | | prop: 'linkType', |
| | | type: 'table', |
| | | type: 'select', |
| | | display: false, |
| | | filterable: true, |
| | | props: { |
| | | label: 'name', |
| | | value: 'name' |
| | | value: 'name', |
| | | desc: 'tag' |
| | | }, |
| | | children: { |
| | | border: true, |
| | | column: [{ |
| | | label: '名称', |
| | | search: true, |
| | | searchSpan: 24, |
| | | prop: 'name' |
| | | }, { |
| | | label: '标签', |
| | | prop: 'tag' |
| | | }], |
| | | }, |
| | | onLoad: ({page, value, data}, callback) => { |
| | | if (page) { |
| | | const params = { |
| | | "conditionMap[selectBtmType]": this.form.showType, |
| | | }; |
| | | getLinkDatasByPage(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}}', |
| | | }, |
| | | { |
| | | label: '选择模板', |
| | | prop: 'templateId', |
| | | display: false, |
| | | type: 'table', |
| | | type: 'select', |
| | | filterable: true, |
| | | dicUrl: '/api/uiManagerController/getPortalVIDatasByPage?page=1&limit=-1&conditionMap[selectBtmType]={{key}}', |
| | | rules: [ |
| | | { |
| | | required: true, |
| | |
| | | ], |
| | | 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 |
| | | }) |
| | | }) |
| | | } |
| | | value: 'viName', |
| | | desc: 'viType' |
| | | }, |
| | | }, |
| | | { |
| | | label: 'UI定义', |
| | | prop: 'SubUILayout', |
| | | type: 'table', |
| | | type: 'select', |
| | | filterable: true, |
| | | display: false, |
| | | 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/getUILayoutDatasByPage?page=1&limit=-1&conditionMap[selectBtmType]={{key}}', |
| | | }, |
| | | { |
| | | label: '查询类型', |
| | |
| | | { |
| | | label: '查询对象类型', |
| | | prop: 'searchObjType', |
| | | type: 'table', |
| | | type: 'select', |
| | | display: false, |
| | | labelWidth: 100, |
| | | 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]": null, // cs端有问题 暂时不展示内容 |
| | | }; |
| | | getLinkDatasByPage(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]=',// cs端有问题 暂时不展示内容 |
| | | }, |
| | | { |
| | | label: '查询模板', |
| | | prop: 'queryTemplateName', |
| | | type: 'table', |
| | | type: 'select', |
| | | filterable: true, |
| | | display: false, |
| | | 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/getQTInfoDatasByPage?page=1&limit=-1&conditionMap[selectBtmType]={{key}}', |
| | | }, |
| | | { |
| | | label: '控制路径', |
| | |
| | | prop: 'expandMode', |
| | | display: false, |
| | | type: 'radio', |
| | | value:'1', |
| | | value: '1', |
| | | dicData: [ |
| | | { |
| | | label: '逐级展开', |
| | |
| | | sourceData: { |
| | | handler(val) { |
| | | if (val && val.plOId) { |
| | | this.getTableList() |
| | | this.getTableList(); |
| | | } else { |
| | | this.data = []; |
| | | } |
| | |
| | | this.tableLoading = false; |
| | | }) |
| | | }, |
| | | |
| | | // 根据不同值区分类型 |
| | | templateTypeValueHandler(val) { |
| | | const componentMap = { |
| | |
| | | this.$refs.crud.rowAdd(); |
| | | }, |
| | | |
| | | // 编辑打开表单前 |
| | | beforeOpen(done, type) { |
| | | if (type === 'edit') { |
| | | this.form.showType = 'Ludc'; |
| | | this.$set(this.form, 'showType', 'Ludc'); |
| | | // this.$set(this.option.group[0].column[0],'value','Ludc'); |
| | | // this.option.group[0].column[0].value = 'Ludc'; |
| | | done(); |
| | | } else { |
| | | done(); |
| | | } |
| | | }, |
| | | |
| | | // 增加关闭对话框 清空event数组 |
| | | beforeClose(done) { |
| | | this.eventData = []; |
| | | done(); |
| | | }, |
| | | |
| | | // 修改 |
| | | editBtnClick(row) { |
| | | console.log(row); |
| | | this.eventData = []; |
| | | if (row.eventKey && row.eventValue) { |
| | | let keys = row.eventKey.split(','); |
| | |
| | | }); |
| | | } |
| | | 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'){ |
| | | 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 |
| | | tabPageOId: this.sourceData.plOId |
| | | } |
| | | addPageDefination(params).then(res => { |
| | | console.log(res); |
| | | if(res.data.code === 200){ |
| | | if (res.data.code === 200) { |
| | | this.$message.success(res.data.obj); |
| | | done() |
| | | this.getTableList(); |
| | | done(); |
| | | } |
| | | }).catch(err=> { |
| | | }).catch(err => { |
| | | loading(); |
| | | }) |
| | | }, |
| | |
| | | } |
| | | }, |
| | | |
| | | // 按钮设计关闭对话框 |
| | | dialogClose() { |
| | | |
| | | }, |
| | | |
| | | // 按钮设计 |
| | | 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(); |
| | | }, |
| | | |
| | |
| | | bottomParams[item.name] = item.value |
| | | }) |
| | | } |
| | | ; |
| | | |
| | | const params = this.saveType === 'add' ? { |
| | | ...this.basicForm, |
| | | parentId: this.nodeTreeRow.oId === 'parentNode' ? '' : this.nodeTreeRow.parentId, |
| | | buttonParams: bottomParams |
| | | buttonParams: bottomParams, |
| | | tableOId:this.selectList[0].id |
| | | } : { |
| | | ...this.basicForm, |
| | | buttonParams: bottomParams |
| | |
| | | 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', |
| | |
| | | }); |
| | | }, |
| | | |
| | | cloneClickBtnHandler(){ |
| | | // 复制到其他组件 |
| | | cloneClickBtnHandler() { |
| | | if (func.isEmptyObject(this.nodeTreeRow)) { |
| | | this.$message.error('请选择节点进行复制'); |
| | | return; |
| | |
| | | this.$message.error('顶层节点不允许复制'); |
| | | return; |
| | | } |
| | | this.$refs.cloneDialog.openDialog(this.nodeTreeRow); |
| | | this.sourceBtnOid = this.nodeTreeRow.oId; |
| | | this.$refs.cloneBtnDialog.openDialog(this.nodeTreeRow); |
| | | }, |
| | | |
| | | // 选择action |
| | | actionFoucus() { |
| | | this.$refs.actionDialog.btnActionVisible = true; |
| | | this.$refs.actionDialog.openDialog(); |
| | | }, |
| | | |
| | | // 保存action |
| | |
| | | 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> |
| | | |