| | |
| | | <template> |
| | | <div :title="title" class="iconShow" :style="'width:'+fontSize+';height:'+fontSize+';font-size: '+fontSize+';'+style" v-html="svgHtml"></div> |
| | | <div v-show="name" :title="title" class="iconShow" :style="'width:'+fontSize+';height:'+fontSize+';font-size: '+fontSize+';'+style" v-html="svgHtml"></div> |
| | | </template> |
| | | |
| | | <script> |
| | |
| | | padding-left: 4.5px; |
| | | } |
| | | |
| | | /* |
| | | 树 |
| | | */ |
| | | /***隐藏树懒加载时节点上的loading,防止节点抖动*****/ |
| | | .el-tree .el-tree-node__loading-icon{ |
| | | display: none !important; |
| | | } |
| | | .el-tree-node__label .iconShow{ |
| | | display: inline-block; |
| | | width: 14px !important; |
| | | height: 14px !important; |
| | | margin-right: 3px; |
| | | } |
| | | |
| | | .el-select{ |
| | | width: 100%; |
| | |
| | | <el-container> |
| | | <el-aside> |
| | | <basic-container> |
| | | <div ref="TreeBox" style="height: calc(100vh - 144px);!important;"> |
| | | <div class="headerCon"> |
| | | <el-button v-if="permissionList.addBtn" icon="el-icon-plus" plain size="small" type="primary" @click="addTreeClickHandler">创建 |
| | | </el-button> |
| | | <el-button v-if="permissionList.editBtn" icon="el-icon-edit" plain size="small" type="primary" @click="editTreeClickHandler">修改 |
| | | </el-button> |
| | | <el-button v-if="permissionList.delBtn" icon="el-icon-delete" plain size="small" type="danger" @click="delTreeClickHandler">删除 |
| | | </el-button> |
| | | <el-button v-if="permissionList.importBtn" icon="el-icon-upload2" plain size="small" type="primary" @click="uploadClickHandler">导入 |
| | | </el-button> |
| | | <el-button v-if="permissionList.exportBtn" icon="el-icon-download" plain size="small" type="primary" @click="exportClickHandler">导出 |
| | | </el-button> |
| | | </div> |
| | | <!-- 左侧树 --> |
| | | <div style="height: calc(100vh - 280px);"> |
| | | <avue-tree |
| | | ref="tree" |
| | | v-model="treeForm" |
| | | :data="treeData" |
| | | :option="treeOption" |
| | | @save="rowTreeSaveHandler" |
| | | @update="rowTreeUpdataHandler" |
| | | @node-click="nodeClick"> |
| | | <!-- 左侧树 --> |
| | | <div style="height: calc(100vh - 150px);"> |
| | | <avue-tree |
| | | ref="tree" |
| | | v-model="treeForm" |
| | | :data="treeData" |
| | | :option="treeOption" |
| | | @node-click="nodeClick"> |
| | | <span slot-scope="{ node, data }" class="el-tree-node__label"> |
| | | <span> |
| | | <i class="el-icon-s-promotion"></i> |
| | | <span style="display: flex"> |
| | | <icon-show :name="data.icon"></icon-show> |
| | | {{ (node || {}).label }} |
| | | </span> |
| | | </span> |
| | | </avue-tree> |
| | | </div> |
| | | </avue-tree> |
| | | </div> |
| | | </basic-container> |
| | | </el-aside> |
| | | |
| | | <el-main> |
| | | <basic-container> |
| | | <basic-container v-if="treeNodeRow.id === 'root' "> |
| | | <div class="headerCon"> |
| | | <el-button v-if="permissionList.addBtn" icon="el-icon-plus" plain size="small" type="primary" @click="addTreeClickHandler">创建 |
| | | </el-button> |
| | | <!--<el-button v-if="permissionList.editBtn" icon="el-icon-edit" plain size="small" type="primary" @click="editTreeClickHandler">修改 |
| | | </el-button> |
| | | <el-button v-if="permissionList.delBtn" icon="el-icon-delete" plain size="small" type="danger" @click="delTreeClickHandler">删除 |
| | | </el-button>--> |
| | | <el-button v-if="permissionList.importBtn" icon="el-icon-upload2" plain size="small" type="primary" @click="uploadClickHandler">导入 |
| | | </el-button> |
| | | <el-button v-if="permissionList.exportBtn" icon="el-icon-download" plain size="small" type="primary" @click="exportClickHandler">导出 |
| | | </el-button> |
| | | </div> |
| | | <div> |
| | | <avue-crud |
| | | ref="treeCrud" |
| | | v-model="treeForm" |
| | | :data="treeData[0].childs" |
| | | :option="treeCrudOption" |
| | | @row-del="rowTreeDelHandler" |
| | | @row-save="rowTreeSaveHandler" |
| | | @row-update="rowTreeUpdataHandler" |
| | | @refresh-change="handleRefresh"> |
| | | </avue-crud> |
| | | </div> |
| | | </basic-container> |
| | | <basic-container v-else> |
| | | <div> |
| | | <avue-crud |
| | | ref="crud" |
| | |
| | | treeNodeRow: {}, |
| | | treeForm: {}, |
| | | treeOption: { |
| | | addBtn: false, |
| | | menu: false, |
| | | defaultExpandedKeys: ['root'], |
| | | props: { |
| | | label: 'name', |
| | | value: 'id', |
| | | children: 'childs' |
| | | }, |
| | | dialogWidth:'800', |
| | | dialogMenuPosition: 'right', |
| | | formOption: { |
| | | dialogMenuPosition: 'right', |
| | | column: [ |
| | | { |
| | | label: '分类名称', |
| | | prop: 'name', |
| | | rules: [ |
| | | { |
| | | required: true, |
| | | message: '请输入分类名称', |
| | | trigger: 'blur' |
| | | } |
| | | ] |
| | | }, |
| | | { |
| | | label: '分类序号', |
| | | prop: 'serialno', |
| | | rules: [ |
| | | { |
| | | required: true, |
| | | message: '请输入分类序号', |
| | | trigger: 'blur' |
| | | } |
| | | ] |
| | | }, |
| | | { |
| | | label: '创建者', |
| | | prop: 'creator', |
| | | disabled: true, |
| | | }, |
| | | { |
| | | label: '创建时间', |
| | | prop: 'createTime', |
| | | disabled: true, |
| | | }, |
| | | { |
| | | label: '父主类', |
| | | prop: 'pidName', |
| | | disabled: true, |
| | | span:24 |
| | | }, |
| | | { |
| | | label: '备注', |
| | | prop: 'description', |
| | | type:'textarea', |
| | | span:24 |
| | | }, |
| | | ], |
| | | } |
| | | }, |
| | | treeData: [], |
| | | treeData: [] |
| | | } |
| | | }, |
| | | computed:{ |
| | |
| | | actionBottomDelBtn: this.vaildData(this.permission[this.$route.query.id].actionBottomDel, false), |
| | | actionBottomEditBtn: this.vaildData(this.permission[this.$route.query.id].actionBottomEdit, false), |
| | | }; |
| | | }, |
| | | treeCrudOption(){ |
| | | return { |
| | | ...basicOption, |
| | | editBtn: this.permissionList.editBtn, |
| | | delBtn: this.permissionList.delBtn, |
| | | addBtn: false, |
| | | calcHeight: -50, |
| | | highlightCurrentRow: true, |
| | | menuWidth: 160, |
| | | span: 24, |
| | | labelWidth: 100, |
| | | dialogWidth: '800', |
| | | column: [{ |
| | | label: '分类名称', |
| | | prop: 'name', |
| | | rules: [{ |
| | | required: true, |
| | | message: '请输入分类名称', |
| | | trigger: 'blur' |
| | | }] |
| | | }, { |
| | | label: '分类序号', |
| | | prop: 'serialno', |
| | | rules: [{ |
| | | required: true, |
| | | message: '请输入分类序号', |
| | | trigger: 'blur' |
| | | }] |
| | | }, { |
| | | label: '父主类', |
| | | prop: 'pidName', |
| | | formatter:function(row){ |
| | | if(row.pid=='root'){ |
| | | return 'Action分类' |
| | | } |
| | | }, |
| | | disabled: true, |
| | | span: 24 |
| | | }, { |
| | | label: '备注', |
| | | prop: 'description', |
| | | type: 'textarea', |
| | | span: 24 |
| | | }], |
| | | } |
| | | }, |
| | | option() { |
| | | return { |
| | |
| | | addBtn: false, |
| | | editBtn:this.permissionList.actionBottomEditBtn, |
| | | delBtn:this.permissionList.actionBottomDelBtn, |
| | | calcHeight: -30, |
| | | calcHeight: -20, |
| | | selection: false, |
| | | refreshBtn: false, |
| | | dialogWidth:'700', |
| | | saveBtn:false, |
| | | // height:'auto', |
| | | column: [ |
| | | { |
| | | label: '参数名称', |
| | |
| | | |
| | | // 右侧表格信息 |
| | | getRightTableList(row) { |
| | | console.log(row); |
| | | this.tableLoading = true; |
| | | const params = { |
| | | plactioncls: row.id ? row.id : '' |
| | |
| | | this.$set(this.treeForm, 'creator', creator); |
| | | this.$set(this.treeForm, 'pid', id); |
| | | this.$set(this.treeForm, 'pidName', name); |
| | | this.$refs.tree.rowAdd(); |
| | | this.$refs.treeCrud.rowAdd(); |
| | | |
| | | }, |
| | | |
| | | // action分类保存 |
| | | rowTreeSaveHandler(node, data, done, loading) { |
| | | saveActionCls(data).then(res => { |
| | | rowTreeSaveHandler(row, done, loading) { |
| | | saveActionCls(row).then(res => { |
| | | if (res.data.code === 200) { |
| | | this.$message.success('分类创建成功'); |
| | | this.getTreeList(); |
| | |
| | | this.$set(this.treeForm, 'pidName', pidName); |
| | | this.$set(this.treeForm, 'description', description); |
| | | |
| | | this.$refs.tree.rowEdit(); |
| | | this.$refs.treeCrud.rowEdit(); |
| | | }, |
| | | |
| | | // action分类修改保存 |
| | | rowTreeUpdataHandler(node, data, done, loading) { |
| | | updateActionCls(data).then(res => { |
| | | rowTreeUpdataHandler(row, done, loading) { |
| | | updateActionCls(row).then(res => { |
| | | if (res.data.code === 200) { |
| | | this.$message.success('修改成功'); |
| | | //this.getBottomList(); |
| | | this.getTreeList(); |
| | | } |
| | | done(); |
| | | }) |
| | |
| | | } |
| | | } |
| | | return 'null'; |
| | | }, |
| | | |
| | | // action分类修改保存 |
| | | rowTreeDelHandler( row) { |
| | | if (row.id === 'root') { |
| | | this.$message.error('根节点不能删除'); |
| | | return; |
| | | } |
| | | |
| | | this.$confirm('您确定要删除当前数据吗?', '提示', { |
| | | confirmButtonText: '确定', |
| | | cancelButtonText: '取消', |
| | | type: 'warning' |
| | | }).then(() => { |
| | | deleteActionCls(row).then(res => { |
| | | if (res.data.code === 200) { |
| | | this.$message.success('分类删除成功'); |
| | | this.getTreeList(); |
| | | } |
| | | }) |
| | | }).catch(() => { |
| | | this.$message({ |
| | | type: 'info', |
| | | message: '已取消删除' |
| | | }); |
| | | }); |
| | | }, |
| | | |
| | | // action分类删除 |
| | |
| | | |
| | | // action分类导出 |
| | | exportClickHandler() { |
| | | |
| | | this.$message({ |
| | | type: 'info', |
| | | message: '待实现' |
| | | }); |
| | | }, |
| | | |
| | | // action分类导入 |
| | | uploadClickHandler() { |
| | | |
| | | this.$message({ |
| | | type: 'info', |
| | | message: '待实现' |
| | | }); |
| | | } |
| | | |
| | | } |
| | |
| | | .el-scrollbar__wrap { |
| | | overflow: auto !important; |
| | | } |
| | | |
| | | .avue-dialog .el-dialog__body .avue-form{ |
| | | margin: 0 auto; |
| | | margin: 0 auto !important; |
| | | } |
| | | } |
| | | </style> |
| | |
| | | addBtn: false, |
| | | editBtn: false, |
| | | delBtn: false, |
| | | tip: false, |
| | | searchMenuSpan: 6, |
| | | align: 'left', |
| | | column: [{ |
| | |
| | | @node-click="nodeClick"> |
| | | <span slot-scope="{ node, data }" class="el-tree-node__label"> |
| | | <span style="display: flex"> |
| | | <icon-show :name="data.icon" class="iconShowSpan"></icon-show> |
| | | <icon-show :name="data.icon"></icon-show> |
| | | {{ (node || {}).label }} |
| | | </span> |
| | | </span> |
| | |
| | | <el-button icon="el-icon-close" plain size="small" type="danger" @click="deleteOperationClickHandler">删除 |
| | | </el-button> |
| | | </div> |
| | | <el-form ref="form" :model="form" label-width="85px" style="max-height: calc(100vh - 200px);overflow: auto;"> |
| | | <el-form ref="form" :model="form" label-width="85px" size="small" style="max-height: calc(100vh - 200px);overflow: auto;"> |
| | | <span v-if="form.category !== 1"> |
| | | <el-form-item label="模块名:"> |
| | | <el-input v-model="form.name" :disabled="!editStatus && !addStatus" placeholder="请输入模块名"></el-input> |
| | |
| | | display: flex; |
| | | justify-content: left; |
| | | margin-bottom: 15px; |
| | | } |
| | | |
| | | .iconShowSpan{ |
| | | display: inline-block; |
| | | width: 14px !important; |
| | | height: 14px !important; |
| | | margin-right: 3px; |
| | | } |
| | | </style> |
| | |
| | | <avue-tree :key="refresh" ref="tree" :data="treeData" :option="treeOption" node-key="id" |
| | | @node-click="nodeClick"> |
| | | <span slot-scope="{ node, data }" class="el-tree-node__label"> |
| | | <span style="display: flex"> |
| | | <icon-show :name="data.icon" class="iconShowSpan"></icon-show> |
| | | <span style="display: flex"> |
| | | <icon-show :name="data.icon"></icon-show> |
| | | {{ (node || {}).label }} |
| | | </span> |
| | | </span> |
| | |
| | | <el-button icon="el-icon-close" plain size="small" type="danger" @click="deleteOperationClickHandler">删除 |
| | | </el-button> |
| | | </div> |
| | | <el-form ref="form" :model="form" label-width="85px" style="max-height: calc(100vh - 200px);overflow: auto;"> |
| | | <el-form ref="form" :model="form" label-width="85px" size="small" style="max-height: calc(100vh - 200px);overflow: auto;"> |
| | | <span v-if="form.category !== 1"> |
| | | <el-form-item label="模块名:"> |
| | | <el-input v-model="form.name" :disabled="!editStatus && !addStatus" placeholder="请输入模块名"></el-input> |
| | |
| | | display: flex; |
| | | justify-content: left; |
| | | margin-bottom: 15px; |
| | | } |
| | | |
| | | .iconShowSpan{ |
| | | display: inline-block; |
| | | width: 14px !important; |
| | | height: 14px !important; |
| | | margin-right: 3px; |
| | | } |
| | | </style> |