| | |
| | | <template> |
| | | <basic-container> |
| | | <div> |
| | | <avue-crud |
| | | ref="crud" |
| | | v-model="form" |
| | | :before-close="beforeClose" |
| | | :before-open="beforeOpen" |
| | | :data="data" |
| | | :option="option" |
| | | :table-loading="tableLoading" |
| | |
| | | </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 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"> |
| | | <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切换 --> |
| | |
| | | append-to-body="true" |
| | | class="avue-dialog" |
| | | title="配置按钮" |
| | | width="70%" |
| | | width="75%" |
| | | @close="dialogClose"> |
| | | <el-container> |
| | | <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="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 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 label="Action:" prop="Action"> |
| | | <el-col :span="14"> |
| | | <el-input v-model="basicForm.actionOId" :readonly="disabledBtn"></el-input> |
| | | <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-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> |
| | | </basic-container> |
| | | <action-dialog ref="actionDialog" @updataAction="actionSaveHandler"></action-dialog> |
| | | <clone-dialog ref="cloneDialog"></clone-dialog> |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | import basicOption from "@/util/basic-option"; |
| | | import func from "@/util/func"; |
| | | import { |
| | | getPLPageDefinations, |
| | | getBtmDatasByPage, |
| | | getPortalVIDatasByPage, |
| | | getQTInfoDatasByPage, |
| | | getTabButtons, |
| | | addTapButton, |
| | | updateTapButton |
| | | updateTapButton, |
| | | getLinkDatasByPage, |
| | | addPageDefination, |
| | | deleteTabButton, |
| | | delPageDefination, |
| | | joinBtn, |
| | | exitBtn |
| | | } from "@/api/UI/uiDefine"; |
| | | import actionDialog from '@/views/modelingMenu/ui/uiDefine/rightRegion/bottomTable/components/action'; |
| | | import cloneDialog from "@/views/modelingMenu/ui/uiDefine/rightRegion/cloneDialog"; |
| | | |
| | | export default { |
| | | props: { |
| | | sourceData: { |
| | | type: Array, |
| | | default: () => [ |
| | | { |
| | | "controlPath": "", |
| | | "description": "", |
| | | "eventKey": "", |
| | | "eventMap": null, |
| | | "eventValue": "", |
| | | "expandCols": "", |
| | | "expandMode": "", |
| | | "extAttr": "", |
| | | "id": "ABAE25CE-867E-9C73-AC1A-B316FD91C65B", |
| | | "isShowImage": "", |
| | | "linkType": "parttodocument", |
| | | "name": "技术文件", |
| | | "navigatorType": "", |
| | | "orderField": "", |
| | | "orderMode": "", |
| | | "orientation": "", |
| | | "qryType": null, |
| | | "queryTemplateName": "QueryPartEngineeringTechnology", |
| | | "refTreeSet": "", |
| | | "returnRows": "", |
| | | "rootContent": "", |
| | | "searchTarger": "2", |
| | | "separator": "", |
| | | "seq": "1", |
| | | "showAbs": "", |
| | | "showContent": "", |
| | | "showContentRelation": "", |
| | | "showContentTable": "", |
| | | "showContentType": "", |
| | | "showExpression": "", |
| | | "showExpressionRoot": "", |
| | | "showLinkAbs": "", |
| | | "showType": "document", |
| | | "subUILayout": "", |
| | | "subUIObjType": "", |
| | | "tabPageOId": "98F9082F-BAF4-FB81-3230-32590B34A329", |
| | | "templateId": "PartEngineeringTechnology_list", |
| | | "templateType": "1", |
| | | "type": 3, |
| | | "uiLayout": null, |
| | | "uiParser": "", |
| | | "validity": "" |
| | | } |
| | | ] |
| | | type: Object, |
| | | default: () => { |
| | | } |
| | | }, |
| | | height: { |
| | | type: String, |
| | | default: () => "auto" |
| | | } |
| | | }, |
| | | components: { |
| | | actionDialog, |
| | | cloneDialog |
| | | }, |
| | | name: "index", |
| | | data() { |
| | | return { |
| | | 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: [], |
| | |
| | | column: [ |
| | | { |
| | | label: '名称', |
| | | prop: 'name' |
| | | prop: 'name', |
| | | span: 24, |
| | | rules: [ |
| | | { |
| | | required: true, |
| | | message: '请输入名称', |
| | | trigger: 'blur' |
| | | } |
| | | ] |
| | | }, |
| | | { |
| | | label: '值', |
| | | prop: 'value' |
| | | prop: 'value', |
| | | span: 24, |
| | | rules: [ |
| | | { |
| | | required: true, |
| | | message: '请输入值', |
| | | trigger: 'blur' |
| | | } |
| | | ] |
| | | } |
| | | ] |
| | | }, |
| | |
| | | basicForm: { |
| | | seq: 1 |
| | | }, |
| | | treeData: [ |
| | | { |
| | | label: this.sourceData[0].name, |
| | | oId: 'parentNode', |
| | | children: [] |
| | | } |
| | | ], |
| | | treeData: [], |
| | | treeOption: { |
| | | menu: false, |
| | | addBtn: false, |
| | |
| | | btnDesignVisible: false, |
| | | FormData: [], |
| | | form: {}, |
| | | data: this.sourceData, |
| | | data: [], |
| | | option: { |
| | | ...basicOption, |
| | | height: this.height, |
| | | addBtn: false, |
| | | index: true, |
| | | calcHeight: -30, |
| | | editBtn: false, |
| | | delBtn: false, |
| | | column: [ |
| | | { |
| | | label: '名称', |
| | |
| | | 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] = ""; |
| | | }) |
| | | const searchTarger = this.option.column.find(item => item.prop === 'searchTarger'); // 获取搜索类型配置项 |
| | | searchTarger.display = true; // 切换默认展示搜索类型 |
| | | // 模板类型为表格 |
| | |
| | | dicData: [ |
| | | { |
| | | label: '不显示', |
| | | value: '1' |
| | | value: '3' |
| | | }, |
| | | { |
| | | label: '显示角色', |
| | |
| | | }, |
| | | { |
| | | label: '显示Folder', |
| | | value: '3', |
| | | value: '1', |
| | | }, |
| | | ], |
| | | }, |
| | |
| | | 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] = ''; |
| | | }) |
| | | } |
| | | }, |
| | | { |
| | |
| | | ], |
| | | group: [ |
| | | { |
| | | icon: 'el-icon-folder-opened', |
| | | label: '', |
| | | arrow: false, |
| | | prop: 'group1', |
| | |
| | | { |
| | | 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' |
| | | }, |
| | | 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 |
| | | }) |
| | | }) |
| | | rules: [ |
| | | { |
| | | required: true, |
| | | message: '请选择内容', |
| | | trigger: 'change' |
| | | } |
| | | }, |
| | | ], |
| | | }, |
| | | { |
| | | label: '链接类型', |
| | | prop: 'linkType', |
| | | type: 'table', |
| | | type: 'select', |
| | | display: false, |
| | | 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}}', |
| | | }, |
| | | { |
| | | label: '选择模板', |
| | | prop: 'showTypea', |
| | | prop: 'templateId', |
| | | display: false, |
| | | type: 'table', |
| | | 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' |
| | | }, |
| | | 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: 'UI', |
| | | type: 'table', |
| | | prop: 'SubUILayout', |
| | | 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: '查询类型', |
| | | prop: 'searchType', |
| | | display: false, |
| | | value: '1', |
| | | type: 'radio', |
| | | span: 24, |
| | | dicData: [ |
| | |
| | | { |
| | | 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]": 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', |
| | | 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: 'kzlj', |
| | | prop: 'controlPath', |
| | | display: false, |
| | | type: 'textarea', |
| | | span: 24, |
| | | rows: 3 |
| | | }, |
| | | { |
| | | label: '根节点显示表达式', |
| | | prop: 'genjiedian', |
| | | label: '树结构展开列', |
| | | prop: 'expandCols', |
| | | labelWidth: 110, |
| | | display: false, |
| | | labelWidth: 135, |
| | | span: 24 |
| | | }, |
| | | { |
| | | label: '树节点显示表达式', |
| | | prop: 'shujiedian', |
| | | display: false, |
| | | labelWidth: 135, |
| | | span: 24 |
| | | span: 12 |
| | | }, |
| | | { |
| | | label: '参照树设置', |
| | | prop: 'canzhaoshu', |
| | | prop: 'showLinkAbs', |
| | | display: false, |
| | | }, |
| | | { |
| | | label: '分隔符', |
| | | prop: 'fgf', |
| | | prop: 'separator', |
| | | display: false, |
| | | }, |
| | | { |
| | | label: '展开方式', |
| | | prop: 'zkfs', |
| | | prop: 'expandMode', |
| | | display: false, |
| | | type: 'radio', |
| | | value: '1', |
| | | dicData: [ |
| | | { |
| | | label: '逐级展开', |
| | |
| | | }, |
| | | { |
| | | label: '全部展开', |
| | | value: '2' |
| | | value: '0' |
| | | } |
| | | ] |
| | | }, |
| | | { |
| | | 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: {}, |
| | | } |
| | | }, |
| | | 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 = { |
| | |
| | | |
| | | // 增加 |
| | | 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') { |
| | | 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) { |
| | | 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); |
| | | 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; |
| | | } |
| | | } |
| | | // 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.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']); |
| | | }, |
| | | |
| | | // 模板类型为自定义模板 |
| | |
| | | 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', 'zkfs']); |
| | | }, |
| | | |
| | | // 模板类型为表单 |
| | | templateTypeForm(val) { |
| | | if (!val) return; |
| | | this.updateDisplay(val, ['showType', 'showTypea', 'showTypes']); |
| | | this.updateDisplay(val, ['showType', 'templateId', 'queryTemplateName']); |
| | | }, |
| | | |
| | | // 模板类型为树 |
| | |
| | | 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']); |
| | | }, |
| | | |
| | | // 模板类型为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']); |
| | | }, |
| | | |
| | | // 查找数组中对象索引 |
| | |
| | | }, |
| | | |
| | | // 上移 |
| | | 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 位置插入之前被移除的元素 |
| | | // 使用 splice 来模拟交换 |
| | | 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 <= 0) { |
| | | this.$message.error('请至少选择一条数据'); |
| | | return; |
| | | } |
| | | if (this.selectList.length > 1) { |
| | | this.$message.error('最多选择一条数据'); |
| | | if (this.selectList.length != 1) { |
| | | this.$message.error('请选择一条数据'); |
| | | return; |
| | | } |
| | | this.btnDesignVisible = true; |
| | |
| | | getTabButtons(params).then(res => { |
| | | if (res.data.code === 200) { |
| | | const data = res.data.data; |
| | | this.treeData[0].children = data; |
| | | this.treeData = [{ |
| | | label: this.selectList[0].name, |
| | | oId: 'parentNode', |
| | | disabled: true, |
| | | children: data |
| | | }]; |
| | | this.treeLoading = false; |
| | | } else { |
| | | this.$message.error('请检查控制台错误'); |
| | |
| | | this.paramsData.splice(row.$index, 1) |
| | | }, |
| | | |
| | | // 按钮设计信息参数信息修改 |
| | | paramsRowEditHandler(row) { |
| | | this.$refs.paramsCrud.rowEdit(row); |
| | | }, |
| | | |
| | | // 按钮设计参数信息添加按钮 |
| | | paramsRowAddClickHandler() { |
| | | this.$refs.paramsCrud.rowAdd(); |
| | | }, |
| | | |
| | | // 按钮设计参数信息修改保存 |
| | | paramsRowUpdate(row, index, done, loading) { |
| | | this.paramsData.splice(index, 1, row); |
| | | done(); |
| | | }, |
| | | |
| | | // 按钮设计参数信息保存 |
| | |
| | | // 按钮设计修改 |
| | | editClickBtnHandler() { |
| | | if (func.isEmptyObject(this.nodeTreeRow)) { |
| | | this.$message.error('请选择节点进行添加'); |
| | | this.$message.error('请选择节点进行修改'); |
| | | return; |
| | | } |
| | | |
| | |
| | | |
| | | // 按钮设计保存 |
| | | saveClickBtnHandler() { |
| | | this.dialogLoading = true; |
| | | const saveFunction = this.saveType === 'add' ? addTapButton : updateTapButton; |
| | | const bottomParams = {}; |
| | | if (this.paramsData.length > 0) { |
| | |
| | | bottomParams[item.name] = item.value |
| | | }) |
| | | } |
| | | ; |
| | | |
| | | const params = this.saveType === 'add' ? { |
| | | ...this.basicForm, |
| | |
| | | this.getTabBtnTree(); |
| | | this.basicForm = {}; |
| | | this.paramsData = []; |
| | | this.dialogLoading = false; |
| | | } |
| | | }).catch(err => { |
| | | this.dialogLoading = false; |
| | | }) |
| | | }, |
| | | |
| | |
| | | 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() { |
| | | if (func.isEmptyObject(this.nodeTreeRow)) { |
| | | this.$message.error('请选择节点进行复制'); |
| | | return; |
| | | } |
| | | if (this.nodeTreeRow.oId === "parentNode") { |
| | | this.$message.error('顶层节点不允许复制'); |
| | | return; |
| | | } |
| | | this.$refs.cloneDialog.openDialog(this.nodeTreeRow); |
| | | }, |
| | | |
| | | // 选择action |
| | | actionFoucus() { |
| | | this.$refs.actionDialog.btnActionVisible = true; |
| | | }, |
| | | |
| | | // 保存action |
| | | actionSaveHandler(val) { |
| | | this.$set(this.basicForm, 'actionName', val.plName); |
| | | this.$set(this.basicForm, 'actionOId', val.plOId); |
| | | }, |
| | | |
| | | // 打开克隆对话框 |
| | | rowCloneHandler(row) { |
| | | 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> |
| | | |