| | |
| | | <template> |
| | | <div class="cataLogBox"> |
| | | <div class="subpage_Box"> |
| | | <My-bread :list="[ |
| | | `${$t('dataManage.dataManage')}`, |
| | | `${$t('dataManage.catalogueManage')}`, |
| | | ]"></My-bread> |
| | | <el-divider /> |
| | | <div class="cataLogContent"> |
| | | <div class="cataLog_leftTree"> |
| | | <div class="cataLog_leftTree subpage_Div"> |
| | | <div style="min-width:450px"> |
| | | <el-tree |
| | | ref="tree" |
| | |
| | | :data="dirList" |
| | | :highlight-current="true" |
| | | :expand-on-click-node="false" |
| | | :default-expand-all="true" |
| | | :default-expanded-keys="expandData" |
| | | @node-click="handleNodeClick" |
| | | > |
| | | |
| | | </el-tree> |
| | | </div> |
| | | </div> |
| | | <div class="cataLog_rightContent"> |
| | | <div class="cataLog_rightContent subpage_Div"> |
| | | <div style="display:flex;justify-content:space-between"> |
| | | <el-breadcrumb separator="/"> |
| | | <el-breadcrumb-item :to="{ path: '/' }">{{ |
| | |
| | | </el-breadcrumb> |
| | | <div> |
| | | <el-button |
| | | v-if="menuStatus.update" |
| | | :disabled="itemdetail.pid == null ? true : false" |
| | | @click="setEditNode(1)" |
| | | type="info" |
| | |
| | | size="small" |
| | | >向上移动</el-button> |
| | | <el-button |
| | | v-if="menuStatus.update" |
| | | :disabled="itemdetail.pid == null ? true : false" |
| | | @click="setEditNode(2)" |
| | | type="info" |
| | |
| | | size="small" |
| | | >向下移动</el-button> |
| | | <el-button |
| | | v-if="menuStatus.insert" |
| | | :disabled="itemdetail.pid == null ? true : false" |
| | | @click="setNewNode(1)" |
| | | type="success" |
| | |
| | | size="small" |
| | | >新增同级</el-button> |
| | | <el-button |
| | | v-if="menuStatus.insert" |
| | | :disabled="itemdetail.pid == null ? true : false" |
| | | @click="setNewNode(2)" |
| | | type="success" |
| | |
| | | size="small" |
| | | >新增子级</el-button> |
| | | <el-button |
| | | v-if="menuStatus.delete" |
| | | @click="setDelNode()" |
| | | :disabled="itemdetail.pid == null ? true : false" |
| | | type="danger" |
| | |
| | | </el-form-item> |
| | | <div class="btnBox"> |
| | | <el-button |
| | | v-if="menuStatus.update" |
| | | class="primary" |
| | | size="small" |
| | | @click="updCata('itemdetail')" |
| | |
| | | $t('common.preservation') |
| | | }}</el-button> |
| | | <el-button |
| | | v-if="menuStatus.update" |
| | | type="info" |
| | | size="small" |
| | | @click="reset" |
| | |
| | | updateDirTrees, |
| | | insertDir, |
| | | deleteDir, |
| | | getPerms, |
| | | } from '../../api/api'; |
| | | import MyBread from '../../components/MyBread.vue'; |
| | | export default { |
| | |
| | | } |
| | | }; |
| | | return { |
| | | menuStatus: { |
| | | delete: false, |
| | | insert: false, |
| | | update: false, |
| | | }, |
| | | defaultProps: { |
| | | children: 'children', |
| | | label: 'name', |
| | |
| | | name: [{ required: true, validator: validName, trigger: 'blur' }], |
| | | }, |
| | | newNode: null, |
| | | expandData: [], |
| | | }; |
| | | }, |
| | | methods: { |
| | |
| | | |
| | | if (this.itemdetail.id != null) { |
| | | this.$nextTick(() => { |
| | | this.$refs.tree.setCurrentKey(this.itemdetail.id); |
| | | |
| | | // this.expandData=[1] |
| | | // this.$refs.tree.setCurrentKey(this.itemdetail.id); |
| | | // document.getElementById(this.itemdetail.id).click(); |
| | | }); |
| | | } |
| | | |
| | |
| | | message: '添加成功', |
| | | type: 'success', |
| | | }); |
| | | |
| | | this.itemdetail = {}; |
| | | this.ruleForm = {}; |
| | | this.dialogFormVisible = false; |
| | |
| | | this.getDirTree(); |
| | | return; |
| | | } else { |
| | | alert('调整失败,请重试!'); |
| | | this.$message.error('修改失败,请重试!'); |
| | | } |
| | | }) |
| | | .catch(() => { |
| | | alert('修改失败,请重试!'); |
| | | this.$message.error('修改失败,请重试!'); |
| | | }); |
| | | }, |
| | | handleNodeClick(data, node) { |
| | |
| | | }, 500); |
| | | }) |
| | | .catch((res) => { |
| | | alert('修改失败,请重试!'); |
| | | this.$message.error('修改失败,请重试!'); |
| | | this.fullscreenLoading = false; |
| | | }); |
| | | } else { |
| | |
| | | this.itemdetail = JSON.parse(this.backUpData); |
| | | } |
| | | }, |
| | | showPermsMenu(res) { |
| | | |
| | | switch (res.tag) { |
| | | case '/delete': |
| | | this.menuStatus.delete = true; |
| | | break; |
| | | case '/insert': |
| | | this.menuStatus.insert = true; |
| | | break; |
| | | case '/update': |
| | | this.menuStatus.update = true; |
| | | break; |
| | | } |
| | | }, |
| | | getPerms() { |
| | | var val = this.$store.state.currentPerms; |
| | | var permsEntity = this.$store.state.permsEntity; |
| | | if (!permsEntity || !permsEntity.length) { |
| | | getPerms().then((res) => { |
| | | if (res.code == 200) { |
| | | permsEntity = res.result; |
| | | } |
| | | }); |
| | | } |
| | | for (var i = 0; i < permsEntity.length; i++) { |
| | | if (val === permsEntity[i].perms) { |
| | | console.log(i, permsEntity[i]) |
| | | this.showPermsMenu(permsEntity[i]); |
| | | } |
| | | } |
| | | }, |
| | | }, |
| | | mounted() { |
| | | this.getDirTree(); |
| | | this.getPerms(); |
| | | }, |
| | | }; |
| | | </script> |
| | | |
| | | <style lang="less" scoped> |
| | | .cataLogBox { |
| | | .subpage_Box { |
| | | height: 98%; |
| | | width: 98%; |
| | | padding: 1%; |
| | |
| | | .cataLog_leftTree { |
| | | width: 15%; |
| | | height: 91%; |
| | | border: 1px solid white; |
| | | border-radius: 5px; |
| | | padding: 1%; |
| | | overflow-y: auto; |
| | |
| | | .cataLog_rightContent { |
| | | width: 80%; |
| | | height: 91%; |
| | | border: 1px solid white; |
| | | border-radius: 5px; |
| | | padding: 1%; |
| | | } |
| | | } |
| | | // .cataSettings_tree { |
| | | // position: relative; |
| | | // width: 344px; |
| | | // height: 100%; |
| | | // background: rgb(240, 242, 245); |
| | | // padding: 20px; |
| | | // border-radius: 10px; |
| | | // box-sizing: border-box; |
| | | // overflow: auto; |
| | | // .saveBtn { |
| | | // position: absolute; |
| | | // left: 250px; |
| | | // top: 23px; |
| | | // } |
| | | // .cataTreeBox { |
| | | // height: 88%; |
| | | // width: 100%; |
| | | // overflow: auto; |
| | | // .el-tree { |
| | | // background: transparent; |
| | | // font-size: 15px; |
| | | // font-family: Microsoft YaHei; |
| | | // font-weight: 400; |
| | | // color: #000000; |
| | | // /deep/ .el-tree-node { |
| | | // padding-top: 10px; |
| | | // // padding-bottom: 10px; |
| | | // } |
| | | // /deep/ .el-tree-node:focus > .el-tree-node__content { |
| | | // background-color: #b9b9b9; |
| | | // } |
| | | // /deep/ .el-tree-node__content:hover { |
| | | // background-color: rgb(153, 153, 153); |
| | | // } |
| | | // .btnBox { |
| | | // margin: 0 10px 0 5px; |
| | | // .el-button + .el-button { |
| | | // margin-left: 5px; |
| | | // } |
| | | // } |
| | | // } |
| | | // } |
| | | // } |
| | | // .itemSettings { |
| | | // width: calc(100% - 344px); |
| | | // border-radius: 10px; |
| | | // background: rgb(240, 242, 245); |
| | | // margin-left: 10px; |
| | | // height: 100%; |
| | | // padding: 10px; |
| | | // box-sizing: border-box; |
| | | // .title_box { |
| | | // background: #fff; |
| | | // padding: 10px; |
| | | // margin-bottom: 24px; |
| | | // display: flex; |
| | | // border-radius: 10px; |
| | | // border: 1px solid rgb(202, 201, 204); |
| | | // box-sizing: border-box; |
| | | // } |
| | | // .form_box { |
| | | // border: 1px solid rgb(202, 201, 204); |
| | | // border-radius: 10px; |
| | | // background: #fff; |
| | | // padding-top: 30px; |
| | | // box-sizing: border-box; |
| | | // width: 100%; |
| | | // .el-input, |
| | | // /deep/ .el-textarea { |
| | | // width: 400px; |
| | | // } |
| | | // .btnBox { |
| | | // margin: 0 270px 20px; |
| | | // width: 200px; |
| | | // display: flex; |
| | | // justify-content: space-between; |
| | | // } |
| | | // } |
| | | // } |
| | | // /deep/ .el-dialog__body { |
| | | // padding: 0 30px 0 0; |
| | | // } |
| | | .el-icon-delete-solid { |
| | | color: gray; |
| | | } |
| | | .el-icon-circle-plus { |
| | | color: gray; |
| | | } |
| | | /deep/.el-form-item__label { |
| | | color: white; |
| | | } |
| | | // 设置输入框的背景色、字体颜色、边框属性设置; |
| | | /deep/.el-input__inner { |
| | | background-color: transparent !important ; |
| | | color: #fff; |
| | | border: 1px solid; |
| | | } |
| | | /deep/ .el-dialog { |
| | | background: #303030; |
| | | } |
| | | /deep/.el-range-editor.is-active, |
| | | .el-range-editor.is-active:hover, |
| | | .el-select .el-input.is-focus .el-input__inner { |
| | | border: 1px solid; |
| | | } |
| | | /deep/.el-dialog__title { |
| | | color: white; |
| | | } |
| | | .primary { |
| | | background: #409eff; |
| | | border: #409eff; |
| | | color: white; |
| | | } |
| | | } |
| | | </style> |