|
@@ -0,0 +1,119 @@
|
|
|
+<template>
|
|
|
+ <div class="JNPF-common-layout">
|
|
|
+ <div class="JNPF-common-layout-center JNPF-flex-main">
|
|
|
+ <div class="JNPF-common-layout-main JNPF-flex-main">
|
|
|
+ <div class="JNPF-common-head">
|
|
|
+ <el-button type="primary" icon="el-icon-plus" @click="addMenu">
|
|
|
+ 新增
|
|
|
+ </el-button>
|
|
|
+ <div class="JNPF-common-head-right">
|
|
|
+ <el-tooltip effect="dark" content="展开" placement="top">
|
|
|
+ <el-link v-show="!expands" type="text"
|
|
|
+ icon="icon-ym icon-ym-btn-expand JNPF-common-head-icon"
|
|
|
+ :underline="false" @click="toggleExpand()" />
|
|
|
+ </el-tooltip>
|
|
|
+ <el-tooltip effect="dark" content="折叠" placement="top">
|
|
|
+ <el-link v-show="expands" type="text"
|
|
|
+ icon="icon-ym icon-ym-btn-collapse JNPF-common-head-icon"
|
|
|
+ :underline="false" @click="toggleExpand()" />
|
|
|
+ </el-tooltip>
|
|
|
+ <el-tooltip effect="dark" :content="$t('common.refresh')" placement="top">
|
|
|
+ <el-link icon="icon-ym icon-ym-Refresh JNPF-common-head-icon"
|
|
|
+ :underline="false" @click="initData()" />
|
|
|
+ </el-tooltip>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <JNPF-table v-loading="listLoading" :data="treeList" row-key="id"
|
|
|
+ v-if="refreshTable" :default-expand-all="expands"
|
|
|
+ :tree-props="{ children: 'children', hasChildren: '' }">
|
|
|
+ <el-table-column prop="label" label="名称"> </el-table-column>
|
|
|
+ <el-table-column prop="level" label="类型" align="center">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span v-if="scope.row.level == 1">厅局</span>
|
|
|
+ <span v-else-if="scope.row.level == 2">项目</span>
|
|
|
+ <span v-else-if="scope.row.level == 3">系统</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </JNPF-table>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import {
|
|
|
+ findTreeList,
|
|
|
+ syncOrganizeProjectSystemDict
|
|
|
+} from "@/api/governmentCloud/dictionaryOfProjectSystemsForDepartmentsAndBureaus/dictionaryOfProjectSystemsForDepartmentsAndBureaus";
|
|
|
+export default {
|
|
|
+ name: "menuManagement",
|
|
|
+ components: {},
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ listQuery: {
|
|
|
+ keyword: ""
|
|
|
+ },
|
|
|
+ treeList: [],
|
|
|
+ rawData: [],
|
|
|
+ expands: true,
|
|
|
+ refreshTable: true,
|
|
|
+ btnLoading: false,
|
|
|
+ listLoading: true,
|
|
|
+ formVisible: false,
|
|
|
+ depFormVisible: false,
|
|
|
+ checkUserFormVisible: false
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.initData();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ initData() {
|
|
|
+ this.loading = true;
|
|
|
+ this.listLoading = true;
|
|
|
+ findTreeList(this.listQuery)
|
|
|
+ .then(res => {
|
|
|
+ this.rawData = res.data;
|
|
|
+ this.treeList = res.data;
|
|
|
+ if (this.treeList.length > 0) this.setTableIndex(this.treeList);
|
|
|
+ this.listLoading = false;
|
|
|
+ this.btnLoading = false;
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ this.listLoading = false;
|
|
|
+ this.btnLoading = false;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ addMenu() {
|
|
|
+
|
|
|
+ },
|
|
|
+ // 树形列表index层级,实现方法(可复制直接调用)
|
|
|
+ setTableIndex(arr, index) {
|
|
|
+ arr.forEach((item, key) => {
|
|
|
+ item.index = key + 1;
|
|
|
+ if (index) {
|
|
|
+ item.index = index + 1;
|
|
|
+ }
|
|
|
+ if (item.children) {
|
|
|
+ this.setTableIndex(item.children, item.index);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ toggleExpand() {
|
|
|
+ this.refreshTable = false;
|
|
|
+ this.expands = !this.expands;
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.refreshTable = true;
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+.table-icon {
|
|
|
+ vertical-align: bottom;
|
|
|
+ font-size: 16px;
|
|
|
+ margin-right: 6px;
|
|
|
+ line-height: 23px;
|
|
|
+}
|
|
|
+</style>
|