Browse Source

菜单

wxz_dy_form_config
tianq 2 years ago
parent
commit
b098771b84
  1. 185
      epmet-oper-web/src/views/modules/workPc/menu.vue

185
epmet-oper-web/src/views/modules/workPc/menu.vue

@ -1,100 +1,72 @@
<template> <template>
<el-card shadow="never" <el-card shadow="never" class="aui-card--fill">
class="aui-card--fill">
<div class="mod-sys__menu"> <div class="mod-sys__menu">
<el-form :inline="true" <!-- <el-form :inline="true">
:model="dataForm" <el-form-item><el-input v-model="ruleForm.name" placeholder="请输入客户名称" :clearable="true"></el-input></el-form-item>
@keyup.enter.native="getDataList()"> <el-form-item><el-button type="primary" @click="submitForm(ruleForm)">查询</el-button></el-form-item>
</el-form> -->
<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
<el-form-item> <el-form-item>
<el-button type="primary" <el-button type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button>
@click="addOrUpdateHandle()">{{ $t('add') }}</el-button> <el-button type="primary" @click="open('')">开启</el-button>
<el-button type="primary" @click="close('')">关闭</el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
<el-table v-loading="dataListLoading" <el-table @selection-change="handleSelectionChange" v-loading="dataListLoading" :data="dataList" row-key="id" border :height="tableHeight" style="width: 100%;">
:data="dataList" <el-table-column label="" fixed="left" type="selection" align="center" width="50" />
row-key="id" <el-table-column label="序号" fixed="left" type="index" align="center" width="50" />
border
:height="tableHeight" <el-table-column prop="name" :label="$t('menu.name')" header-align="center" min-width="150"></el-table-column>
style="width: 100%;"> <el-table-column prop="icon" :label="$t('menu.icon')" header-align="center" align="center">
<el-table-column prop="name"
:label="$t('menu.name')"
header-align="center"
min-width="150"></el-table-column>
<el-table-column prop="icon"
:label="$t('menu.icon')"
header-align="center"
align="center">
<template slot-scope="scope"> <template slot-scope="scope">
<svg class="icon-svg" <svg class="icon-svg" aria-hidden="true"><use :xlink:href="`#${scope.row.icon}`"></use></svg>
aria-hidden="true">
<use :xlink:href="`#${scope.row.icon}`"></use>
</svg>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="type"
:label="$t('menu.type')" <el-table-column prop="showFlag" label="菜单类型" header-align="center" align="center">
header-align="center"
align="center">
<template slot-scope="scope"> <template slot-scope="scope">
<el-tag v-if="scope.row.type === 0" 基础应用
size="small">{{ $t('menu.type0') }}</el-tag>
<el-tag v-else
size="small"
type="info">{{ $t('menu.type1') }}</el-tag>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="sort" <el-table-column prop="sort" :label="$t('menu.sort')" header-align="center" align="center"></el-table-column>
:label="$t('menu.sort')" <el-table-column prop="url" :label="$t('menu.url')" header-align="center" align="center" width="450" :show-overflow-tooltip="true"></el-table-column>
header-align="center" <el-table-column
align="center"></el-table-column> prop="permissions"
<el-table-column prop="url"
:label="$t('menu.url')"
header-align="center"
align="center"
width="450"
:show-overflow-tooltip="true"></el-table-column>
<el-table-column prop="permissions"
:label="$t('menu.permissions')" :label="$t('menu.permissions')"
header-align="center" header-align="center"
align="center" align="center"
width="150" width="150"
:show-overflow-tooltip="true"></el-table-column> :show-overflow-tooltip="true"
<el-table-column :label="$t('handle')" ></el-table-column>
fixed="right" <el-table-column prop="type" :label="$t('状态')" header-align="center" align="center">
header-align="center" <template slot-scope="scope">
align="center" <el-tag v-if="scope.row.showFlag === 1" size="small">已启用</el-tag>
width="150"> <el-tag type="danger" v-if="scope.row.showFlag === 0" size="small">已关闭</el-tag>
</template>
</el-table-column>
<el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="150">
<template slot-scope="scope"> <template slot-scope="scope">
<el-button type="text" <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">{{ $t('update') }}</el-button>
size="small" <el-button type="text" size="small" @click="deleteHandle(scope.row.id)">{{ $t('delete') }}</el-button>
@click="addOrUpdateHandle(scope.row.id)">{{ $t('update') }}</el-button> <el-button type="text" size="small" @click="showCustomerMenu(scope.row)">{{ '客户配置' }}</el-button>
<el-button type="text" <el-button type="text" size="small" v-if="scope.row.showFlag == 0" @click="open(scope.row.id)">{{ '开启' }}</el-button>
size="small" <el-button type="text" size="small" v-if="scope.row.showFlag == 1" @click="close(scope.row.id)">{{ '关闭' }}</el-button>
@click="deleteHandle(scope.row.id)">{{ $t('delete') }}</el-button>
<el-button type="text"
size="small"
@click="showCustomerMenu(scope.row)">{{ '客户配置' }}</el-button>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<!-- 弹窗, 新增 / 修改 --> <!-- 弹窗, 新增 / 修改 -->
<add-or-update v-if="addOrUpdateVisible" <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" :tableName="'gov_menu'" @refreshDataList="getDataList"></add-or-update>
ref="addOrUpdate"
:tableName="'gov_menu'"
@refreshDataList="getDataList"></add-or-update>
<!-- 客户菜单配置 --> <!-- 客户菜单配置 -->
<customer-add-or-update ref="customerForm" <customer-add-or-update ref="customerForm" :menuName="selMenuName" @refreshDataList="getDataList"></customer-add-or-update>
:menuName="selMenuName"
@refreshDataList="getDataList"></customer-add-or-update>
</div> </div>
</el-card> </el-card>
</template> </template>
<script> <script>
import mixinViewModule from '@/mixins/view-module' import mixinViewModule from '@/mixins/view-module';
import AddOrUpdate from './menu-add-or-update' import AddOrUpdate from './menu-add-or-update';
import { mapGetters } from 'vuex' import { mapGetters } from 'vuex';
import CustomerAddOrUpdate from './customer-add-or-update' import CustomerAddOrUpdate from './customer-add-or-update';
export default { export default {
mixins: [mixinViewModule], mixins: [mixinViewModule],
data() { data() {
@ -104,25 +76,80 @@ export default {
deleteURL: '/gov/access/menu' deleteURL: '/gov/access/menu'
}, },
customerFormVisible: false, customerFormVisible: false,
dataForm: { "tableName": 'gov_menu' }, dataForm: { tableName: 'gov_menu' },
selMenuName: '' selMenuName: '',
} multipleSelection: []
};
}, },
components: { components: {
AddOrUpdate, CustomerAddOrUpdate AddOrUpdate,
CustomerAddOrUpdate
}, },
computed: { computed: {
tableHeight() { tableHeight() {
// return this.resolution === 'small' ? this.clientHeight - 210 : this.clientHeight - 220 // return this.resolution === 'small' ? this.clientHeight - 210 : this.clientHeight - 220
return this.clientHeight - 210 return this.clientHeight - 210;
}, },
...mapGetters(['clientHeight', 'resolution']), ...mapGetters(['clientHeight', 'resolution'])
}, },
methods: { methods: {
handleSelectionChange(val) {
this.multipleSelection = [];
val.forEach(element => {
this.multipleSelection.push(element.id);
});
console.log(this.multipleSelection);
},
showCustomerMenu(row) { showCustomerMenu(row) {
this.selMenuName = row.name this.selMenuName = row.name;
this.$refs['customerForm'].init(row.id) this.$refs['customerForm'].init(row.id);
},
open(id) {
console.log('Aa');
let menuIds = [];
if (id != '') {
menuIds = [id];
} else {
if (this.multipleSelection.length > 0) {
menuIds = this.multipleSelection;
} else {
return this.$message.error('请选择菜单');
}
}
let params = {
menuIds: menuIds,
flagShow: 1
};
this.$http.post('/gov/access/menu/updateShow/', params).then(({ data: res }) => {
console.log(res);
if (res.code === 0) {
}
});
},
close(id) {
let menuIds = [];
if (id != '') {
menuIds = [id];
} else {
if (this.multipleSelection.length > 0) {
menuIds = this.multipleSelection;
} else {
return this.$message.error('请选择菜单');
}
}
let params = {
menuIds: menuIds,
flagShow: 0
};
this.$http.post('/gov/access/menu/updateShow/', params).then(({ data: res }) => {
console.log(res);
if (res.code === 0) {
} }
});
} }
} }
};
</script> </script>

Loading…
Cancel
Save