| | |
| | | <template> |
| | | <!--类型Action--> |
| | | <el-container> |
| | | |
| | | <el-aside> |
| | | <basic-container> |
| | | <div ref="TreeBox" style="height: calc(100vh - 144px);!important;"> |
| | | <div class="headerCon"> |
| | | <el-button icon="el-icon-plus" plain size="small" type="primary" @click="addClickHandler">创建 |
| | | </el-button> |
| | | <el-button icon="el-icon-edit" plain size="small" type="primary" @click="editClickHandler">修改 |
| | | </el-button> |
| | | <el-button icon="el-icon-delete" plain size="small" type="danger" @click="delClickHandler">删除 |
| | | </el-button> |
| | | <el-button icon="el-icon-download" plain size="small" type="primary" @click="exportClickHandler">导出 |
| | | </el-button> |
| | | <el-button icon="el-icon-upload2" plain size="small" type="primary" @click="uploadClickHandler">导入 |
| | | </el-button> |
| | | <el-button class="smallBtn" plain size="small" type="primary" |
| | | @click="checkViewClickHandler">查看使用范围 |
| | | </el-button> |
| | | </div> |
| | | <basic-container v-loadng="treeLoading"> |
| | | <div ref="TreeBox" style="height: calc(100vh - 154px);!important;"> |
| | | <!-- 左侧树 --> |
| | | <div style="height: calc(100vh - 280px);"> |
| | | <div style="height: calc(100vh - 190px);"> |
| | | <avue-tree :data="treeData" :option="treeOption" @node-click="nodeClick"> |
| | | <span slot-scope="{ node, data }" class="el-tree-node__label"> |
| | | <span style="font-size: 15px"> |
| | | <i class="el-icon-s-promotion"></i> |
| | | {{ (node || {}).label }} |
| | | </span> |
| | | </span> |
| | | <span slot-scope="{ node, data }" class="el-tree-node__label"> |
| | | <span> |
| | | <icon-show :name="data.icon"></icon-show> |
| | | {{ (node || {}).label }} |
| | | </span> |
| | | </span> |
| | | </avue-tree> |
| | | </div> |
| | | </div> |
| | |
| | | |
| | | <el-main> |
| | | <basic-container> |
| | | <avue-crud |
| | | ref="crud" |
| | | :data="data" |
| | | :option="option" |
| | | :table-loading="tableLoading" |
| | | @refresh-change="handleRefresh" |
| | | @search-change="handleSearch" |
| | | @search-reset="handleReset" |
| | | @selection-change="selectChangeHandler" |
| | | @row-click="rowClickHandler"> |
| | | <template slot="menuLeft"> |
| | | <el-button v-if="permissionList.addBtn" class="button-custom-icon" size="small" type="primary" @click="addHandler"> |
| | | <icon-show :name="permissionList.addBtn.source"></icon-show> |
| | | 添加 |
| | | </el-button> |
| | | <el-button v-if="permissionList.delBtn" class="button-custom-icon" plain size="small" type="danger" @click="delHandler"> |
| | | <icon-show :name="permissionList.delBtn.source"></icon-show> |
| | | 移除 |
| | | </el-button> |
| | | </template> |
| | | </avue-crud> |
| | | <action-dialog ref="actionDialog" :is-muti="true" @updataAction="actionSaveHandler"></action-dialog> |
| | | </basic-container> |
| | | </el-main> |
| | | |
| | |
| | | </template> |
| | | |
| | | <script> |
| | | import basicOption from "@/util/basic-option"; |
| | | import { getBizTree} from "@/api/UI/uiDefine"; |
| | | import {getTypeActionByType,savePLTypeAction,delPLTypeActions} from "@/api/authority/ui/typeAction" |
| | | import func from "@/util/func"; |
| | | import actionDialog from "@/views/modelingMenu/ui/Aciton/components/dialog" |
| | | import {mapGetters} from "vuex"; |
| | | |
| | | export default { |
| | | name: "index" |
| | | name: "index", |
| | | components:{actionDialog}, |
| | | data() { |
| | | return { |
| | | treeLoading:false, |
| | | treeOption: { |
| | | height: 'auto', |
| | | defaultExpandAll: true, |
| | | menu: false, |
| | | addBtn: false, |
| | | props: { |
| | | label: 'text', |
| | | value: 'oid', |
| | | children: 'children' |
| | | } |
| | | }, |
| | | nodeRow: {}, |
| | | treeData: [], |
| | | searchParams: {}, |
| | | tableLoading: false, |
| | | selectList: [], |
| | | option: { |
| | | ...basicOption, |
| | | calcHeight: -35, |
| | | addBtn: false, |
| | | editBtn: false, |
| | | delBtn: false, |
| | | tip: false, |
| | | searchMenuSpan: 6, |
| | | align: 'left', |
| | | menu:false, |
| | | column: [ |
| | | { |
| | | label: '编号', |
| | | prop: 'plCode', |
| | | overHidden: true, |
| | | search: true |
| | | }, |
| | | { |
| | | label: '名称', |
| | | prop: 'plName', |
| | | overHidden: true, |
| | | search: true |
| | | }, |
| | | { |
| | | label: 'C/S类路径', |
| | | prop: 'plCSClass', |
| | | searchLabelWidth:120, |
| | | overHidden: true, |
| | | }, |
| | | { |
| | | label: 'B/S链接地址', |
| | | prop: 'plBSUrl', |
| | | searchLabelWidth:120, |
| | | overHidden: true, |
| | | }, |
| | | { |
| | | label: '类型', |
| | | prop: 'plTypeType', |
| | | type: 'select', |
| | | width:100, |
| | | dicData: [{ |
| | | label: '业务类型', |
| | | value: 'business' |
| | | }, { |
| | | label: '链接类型', |
| | | value: 'link' |
| | | }] |
| | | }, |
| | | { |
| | | label: '描述', |
| | | prop: 'plDesc', |
| | | overHidden: true, |
| | | }, |
| | | ] |
| | | }, |
| | | allData: [], |
| | | data: [], |
| | | } |
| | | }, |
| | | computed:{ |
| | | ...mapGetters(["permission"]), |
| | | permissionList() { |
| | | return { |
| | | addBtn: this.vaildData(this.permission[this.$route.query.id].ADD, false), |
| | | delBtn: this.vaildData(this.permission[this.$route.query.id].DELETE, false), |
| | | }; |
| | | }, |
| | | }, |
| | | created() { |
| | | this.getTreeList(); |
| | | }, |
| | | methods: { |
| | | //树表查询 |
| | | getTreeList() { |
| | | this.treeLoading = true; |
| | | getBizTree().then(res => { |
| | | this.treeData = [res.data.obj]; |
| | | this.treeLoading = false; |
| | | }).catch(error => { |
| | | this.treeLoading = false; |
| | | }) |
| | | }, |
| | | // 树点击 |
| | | nodeClick(row) { |
| | | if (row.oid) { |
| | | this.nodeRow = row; |
| | | this.tableLoading = true; |
| | | this.getTableList(); |
| | | } |
| | | }, |
| | | getTableList() { |
| | | getTypeActionByType({ |
| | | 'typeName': this.nodeRow.attributes.name, |
| | | }).then(res => { |
| | | this.data = res.data.data; |
| | | this.allData = res.data.data; |
| | | this.$refs.crud.clearSelection(); |
| | | this.tableLoading = false; |
| | | }) |
| | | }, |
| | | // 多选 |
| | | selectChangeHandler(row) { |
| | | this.selectList = row; |
| | | }, |
| | | // 行点击 |
| | | rowClickHandler(row) { |
| | | func.rowClickHandler( |
| | | row, |
| | | this.$refs.crud, |
| | | this.lastIndex, |
| | | (newIndex) => { |
| | | this.lastIndex = newIndex; |
| | | }, |
| | | () => { |
| | | this.selectList = [row]; |
| | | } |
| | | ); |
| | | }, |
| | | handleRefresh() { |
| | | this.getTableList(); |
| | | }, |
| | | // 搜索查询 |
| | | handleSearch(params, done) { |
| | | const data=this.allData.filter(item=>{ |
| | | if(item.plCode.includes(params.plCode ||'') && item.plName.includes(params.plName || '')){ |
| | | return true; |
| | | }else { |
| | | return false; |
| | | } |
| | | }) |
| | | this.data=data; |
| | | done(); |
| | | }, |
| | | |
| | | // 重置搜索条件 |
| | | handleReset() { |
| | | this.data=this.allData; |
| | | }, |
| | | //创建 |
| | | addHandler() { |
| | | if (this.nodeRow && this.nodeRow.oid && this.nodeRow.oid!='') { |
| | | this.$refs.actionDialog.openDialog(); |
| | | } else { |
| | | this.$message.error('请选择业务类型'); |
| | | } |
| | | }, |
| | | // 保存action |
| | | actionSaveHandler(val) { |
| | | const params = { |
| | | plTypeName: this.nodeRow.attributes.name, |
| | | actions:val |
| | | } |
| | | savePLTypeAction(params).then(res => { |
| | | if(res.data.code == 200){ |
| | | this.$message.success(res.data.obj); |
| | | this.getTableList(); |
| | | } |
| | | }) |
| | | }, |
| | | delHandler() { |
| | | if (this.selectList.length <= 0) { |
| | | this.$message.error('请至少选择一条数据'); |
| | | return; |
| | | } |
| | | const params = { |
| | | typeName: this.nodeRow.attributes.name, |
| | | typeActionOIds: this.selectList.map(item => item.plOId).join(',') |
| | | } |
| | | this.$confirm('是否移除选中的Action?', '提示', { |
| | | confirmButtonText: '确定', |
| | | cancelButtonText: '取消', |
| | | type: 'warning' |
| | | }).then(() => { |
| | | delPLTypeActions(params).then(res => { |
| | | if (res.data.code === 200) { |
| | | this.$message.success('删除成功'); |
| | | this.getTableList(); |
| | | } |
| | | }) |
| | | }).catch(() => { |
| | | this.$message({ |
| | | type: 'info', |
| | | message: '已取消删除' |
| | | }); |
| | | }); |
| | | }, |
| | | } |
| | | } |
| | | </script> |
| | | |
| | |
| | | .el-scrollbar__wrap { |
| | | overflow: auto !important; |
| | | } |
| | | .headerCon{ |
| | | .el-button{ |
| | | width: 82px; |
| | | } |
| | | } |
| | | } |
| | | |
| | | .headerCon { |
| | | display: flex; |
| | | flex-wrap: wrap; |
| | | margin-bottom: 5px; |
| | | |
| | | .el-button + .el-button { |
| | | margin-left: 5px; |
| | | } |
| | | |
| | | .el-button { |
| | | margin-top: 5px; |
| | | } |
| | | } |
| | | |
| | | .headerCon > .el-button:nth-child(4) { |
| | | margin-left: 0; |
| | | } |
| | | |
| | | .headerCon > .el-button:nth-child(7) { |
| | | margin-left: 0; |
| | | } |
| | | |
| | | |
| | | .smallBtn { |
| | | width: 82px; |
| | | text-align: center; |
| | | padding-left: 4.5px; |
| | | } |
| | | |
| | | </style> |