<!--
|
* @Description: 资源目录---- 子模块
|
-->
|
<template>
|
<el-card class="resourcemenu">
|
<div slot="header">
|
<span style="font-size: 18px; font-weight: bold">资源目录</span>
|
<el-button v-hasPermi="['addResource']" style="float: right;margin-right: 20px;" size="mini" type="primary" @click="() => {
|
addSubMenu = false;
|
dialogAddMenuVisible = true;
|
}
|
"><i class="el-icon-add"></i>添加目录</el-button>
|
</div>
|
|
<el-dialog title="添加目录" :visible.sync="dialogAddMenuVisible" size="mini" :close-on-click-modal="false" :modal="false">
|
<add-resource-menu ref="addResource" />
|
<div slot="footer" class="dialog-footer">
|
<el-button size="small" @click="dialogAddMenuVisible = false">取 消</el-button>
|
<el-button size="small" type="primary" @click="handlerResourceCatalogAdd">确 定</el-button>
|
</div>
|
</el-dialog>
|
|
<el-dialog title="更改名称" :visible.sync="dialogEditMenuVisible" size="mini" :close-on-click-modal="false"
|
:modal="false">
|
<edit-resource-menu ref="editResource" />
|
<div slot="footer" class="dialog-footer">
|
<el-button size="small" @click="dialogEditMenuVisible = false">取 消</el-button>
|
<el-button size="small" type="primary" @click="handlerResourceCatalogEdit">确 定</el-button>
|
</div>
|
</el-dialog>
|
|
<el-table :data="tableTreeDdata" size="mini" style="width: 100%; background: transparent" rowKey="id"
|
ref="resourceTable" highlight-current-row default-expand-all
|
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }" @row-click="rowclick">
|
<el-table-column prop="name" header-align="center" align="left" label="名称">
|
<template slot-scope="scope">
|
<i :class="scope.row.icon"></i>
|
<span style="margin-left: 10px">{{ scope.row.name }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column prop="status" header-align="center" align="center" width="100" label="状态"
|
:formatter="formatterStatus">
|
</el-table-column>
|
<el-table-column prop="described" header-align="center" align="center" label="描述">
|
</el-table-column>
|
<el-table-column header-align="center" align="center" label="" width="30"><template slot-scope="scope">
|
<el-dropdown @command="(command) => {
|
handleCommand(command, scope.row);
|
}
|
">
|
<el-button type="text"><i class="el-icon-more"></i></el-button>
|
<el-dropdown-menu slot="dropdown">
|
<el-dropdown-item command="add">添加子目录</el-dropdown-item>
|
<el-dropdown-item command="edit">更改名称</el-dropdown-item>
|
<el-dropdown-item command="property">属性</el-dropdown-item>
|
<el-dropdown-item command="delete">删除</el-dropdown-item>
|
</el-dropdown-menu>
|
</el-dropdown>
|
</template>
|
</el-table-column>
|
</el-table>
|
</el-card>
|
</template>
|
<script>
|
import AddResourceMenu from "./AddResourceMenu.vue";
|
import EditResourceMenu from "./EditResourceMenu.vue";
|
|
import { getResourceCatalogTree, addResourceCatalog, deleteResourceCatalog, editResourceCatalog } from "@/api/api";
|
export default {
|
components: { AddResourceMenu, EditResourceMenu },
|
data() {
|
return {
|
dialogAddMenuVisible: false,
|
dialogEditMenuVisible: false,
|
addSubMenu: false,
|
tableTreeDdata: [],
|
currentResourceCatalog: null,
|
statusArray: [{ text: '未授权', value: -1 }, { text: '私有', value: 0 }, { text: '公开', value: 1 }]
|
};
|
},
|
methods: {
|
showMenu(data) { },
|
deleteMenu() { },
|
handleCommand(command, row) {
|
// this.$message("click on item " + command);
|
if (command === "delete") {
|
this.handlerResourceCatalogRemove(row);
|
} else if (command === "add") {
|
this.addSubMenu = true;
|
this.dialogAddMenuVisible = true;
|
} else if (command === "edit") {
|
this.dialogEditMenuVisible = true;
|
this.$nextTick(() => {
|
this.$refs.editResource.row = row
|
this.$refs.editResource.menuName = row.name
|
})
|
}
|
},
|
InitalResourceTableTree() {
|
let that = this;
|
|
// this.tableTreeDdata = [
|
// {
|
// name: "时空数据",
|
// state: "公开",
|
// description: "时空数据",
|
// icon: "el-icon-time",
|
// },
|
// {
|
// name: "资源调查",
|
// state: "未授权",
|
// description: "资源调查",
|
// icon: "el-icon-tickets",
|
// },
|
// {
|
// name: "工程项目",
|
// state: "未授权",
|
// description: "工程项目",
|
// icon: "el-icon-setting",
|
// },
|
// {
|
// name: "规划管理",
|
// state: "私有",
|
// description: "规划管理",
|
// icon: "el-icon-goods",
|
// },
|
// {
|
// name: "公共专题",
|
// state: "公开",
|
// description: "公共专题",
|
// icon: "el-icon-service",
|
// },
|
// {
|
// name: "物联感知",
|
// state: "私有",
|
// description: "物联感知",
|
// icon: "el-icon-phone-outline",
|
// },
|
// {
|
// name: "CIM成果",
|
// state: "公开",
|
// description: "CIM成果",
|
// icon: "el-icon-share",
|
// },
|
// ];
|
getResourceCatalogTree().then((res) => {
|
if (res.data) {
|
let data = res.data;
|
data.forEach((e, i) => { e.icon = "el-icon-share" })
|
that.tableTreeDdata = res.data;
|
}
|
});
|
|
},
|
formatterStatus(row, column, cellValue, index) {
|
return this.statusArray.filter((e) => e.value === cellValue)[0].text;
|
|
},
|
rowclick(row, column, event) {
|
//再次点击取消选中
|
if (this.currentResourceCatalog && this.currentResourceCatalog.id == row.id) {
|
this.$refs.resourceTable.setCurrentRow(null)
|
this.$emit("resourceMenuClick", null);
|
} else {
|
this.currentResourceCatalog = row;
|
this.$emit("resourceMenuClick", row);
|
}
|
},
|
handlerResourceCatalogAdd() {
|
//判断目录共享类型
|
console.log(' @@ this.$refs.addResource.shareItem',this.$refs.addResource.shareItem)
|
|
let that = this;
|
let name = this.$refs.addResource.menuName;
|
let description = this.$refs.addResource.menuDescription;
|
let item = this.$refs.addResource.shareItem;
|
let parentId = this.addSubMenu === true ? this.currentResourceCatalog.id : -1;
|
let params =
|
{
|
"described": description,
|
"name": name,
|
"parentId": parentId,
|
"status": 0
|
}
|
addResourceCatalog(params).then((res) => {
|
if (res.code === 200) {
|
that.$message(res.msg);
|
that.dialogAddMenuVisible = false;
|
that.InitalResourceTableTree();
|
} else {
|
Message.error(res.msg);
|
}
|
});
|
},
|
handlerResourceCatalogEdit() {
|
let params = {
|
id: this.$refs.editResource.row.id,
|
name: this.$refs.editResource.menuName
|
}
|
editResourceCatalog(params).then((res) => {
|
if (res.code === 200) {
|
this.$message(res.msg);
|
this.dialogEditMenuVisible = false;
|
this.InitalResourceTableTree();
|
} else {
|
Message.error(res.msg);
|
}
|
})
|
},
|
handlerResourceCatalogRemove(row) {
|
let that = this;
|
this.$confirm("此操作将永远删除该数据，是否继续？", "提示", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning",
|
}).then(() => {
|
deleteResourceCatalog(row.id).then((res) => {
|
if (res.code === 200) {
|
let s = res.data;
|
that.InitalResourceTableTree();
|
}
|
});
|
}).catch(() => { });
|
|
}
|
},
|
computed: {},
|
created() {
|
this.InitalResourceTableTree();
|
}
|
};
|
</script>
|
<style lang="less" scoped>
|
.resourcemenu {
|
border: 0 !important;
|
overflow: auto;
|
height: 100%;
|
color: rgba(240, 250, 254, 0.85);
|
border-radius: 0 !important;
|
background: rgba(0, 166, 226, 0.2) !important;
|
|
|
|
/deep/ .el-card__header {
|
background: rgba(0, 166, 226, 0.6) !important;
|
box-shadow: 0px 0px 4px 0px rgba(14, 22, 32, 0.2);
|
border-radius: 0px;
|
height: 48px;
|
|
font-size: 16px;
|
font-weight: 400;
|
border-bottom: 0;
|
padding: 10px;
|
}
|
|
/deep/ .el-card__body {
|
padding: 0px
|
}
|
|
.el-table /deep/ tr {
|
background-color: transparent;
|
color: rgba(240, 250, 254, 0.65);
|
}
|
|
.el-table /deep/ td.el-table__cell {
|
border: 0px;
|
}
|
|
.el-table /deep/ .el-table__body tr.current-row>td {
|
background-color: rgba(0, 166, 226, 0.4) !important;
|
color: #fff;
|
}
|
|
.el-table /deep/ tr th {
|
background-color: rgba(240, 250, 254, 0.1);
|
color: rgba(240, 250, 254, 0.85);
|
}
|
|
.el-table /deep/ tr:hover>td {
|
background-color: rgba(0, 166, 226, 0.4) !important;
|
cursor: pointer;
|
}
|
|
}
|
</style>
|
