epmet-oper-pc-chengyang/epmet-oper-web/src/views/modules/customer/customize/menuCustomer.vue

<template>
	<div>
		<div class="mod-sys__menu">
			<div class="div_btn">
				<span style="margin-right:10px">{{ customerName }}</span>
				<el-button type="default" @click="diaCancel">取消返回</el-button>
				<!-- <el-button class=""
                   type="primary"
                   @click="addShow()">{{"新增" }}</el-button> -->
				<!-- <el-input v-model="search"
                  placeholder="请输入内容"></el-input> -->
			</div>
			<div class="div_btn">
				<el-button class="" type="primary" @click="useMenu()">开启</el-button>
				<el-button class="" type="primary" @click="closeMenu()">关闭</el-button>
			</div>
			<el-table v-loading="dataListLoading" :data="dataList" row-key="id" border style="width: 100%;" @select-all="selectAll" @selection-change="handelSelection">
				<el-table-column type="selection" fixed="left" align="center" width="50" />
				<el-table-column label="序号" fixed="left" type="index" align="center" width="50" />
				<el-table-column prop="name" label="菜单名称" header-align="center" min-width="150"></el-table-column>
				<el-table-column prop="icon" label="图标" header-align="center" align="center">
					<template slot-scope="scope">
						<svg class="icon-svg" aria-hidden="true"><use :xlink:href="`#${scope.row.icon}`"></use></svg>
					</template>
				</el-table-column>
				<el-table-column prop="showFlag" label="菜单类型" header-align="center" align="center">
					<template slot-scope="scope">
						基础应用
					</template>
				</el-table-column>
				<el-table-column prop="sort" :label="$t('menu.sort')" header-align="center" align="center"></el-table-column>
				<el-table-column prop="useFlag" :label="$t('menu.status')" header-align="center" align="center">
					<template slot-scope="scope">
						<el-tag v-if="scope.row.useFlag === '0'" size="small">{{ $t('menu.status0') }}</el-tag>
						<el-tag v-else size="small" type="info">{{ $t('menu.status1') }}</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">
						<el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">{{ $t('update') }}</el-button>
						<el-button v-if="scope.row.useFlag === '0'" type="text" size="small" @click="useUpdate(scope.row.id, '1')">开启</el-button>
						<el-button v-if="scope.row.useFlag === '1'" type="text" size="small" @click="useUpdate(scope.row.id, '0')">关闭</el-button>
					</template>
				</el-table-column>
			</el-table>
			<!-- 弹窗, 新增 / 修改 -->
			<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
		</div>
	</div>
</template>

<script>
import { requestPost } from '@/js/dai/request';
import mixinViewModule from '@/mixins/view-module';
import AddOrUpdate from './menu-customer-add-or-update';
export default {
	mixins: [mixinViewModule],
	data() {
		return {
			customerId: '', // 客户id，父组件传
			customerName: '', // 客户名称，父组件传

			tableParams: {
				customerId: ''
			},
			search: '',
			dataList: [],
			multipleSelection: [],
			selAllFlag: false,

			dataListLoading: false,

			mixinViewModuleOptions: {
				getDataListURL: '/gov/access/menu/customerMenuList'
			}
		};
	},

	computed: {},
	components: {
		AddOrUpdate
	},
	created() {},
	methods: {
		useMenu() {
			let ids = this.selection.map(item => item.id);
			this.$http
				.post('/gov/access/govMenuCustomerRelation/useUpdate', {
					ids: ids,
					use: '1'
				})
				.then(({ data: res }) => {
					return this.$message.success('操作成功');
				});
			this.query();
		},
		closeMenu() {
			let ids = this.selection.map(item => item.id);
			this.$http
				.post('/gov/access/govMenuCustomerRelation/useUpdate', {
					ids: ids,
					use: '0'
				})
				.then(({ data: res }) => {
					return this.$message.success('操作成功');
				});
			this.query();
		},
		useUpdate(id, use) {
			this.$http
				.post('/gov/access/govMenuCustomerRelation/useUpdate', {
					ids: [id],
					use: use
				})
				.then(({ data: res }) => {
					return this.$message.success('操作成功');
				});
			this.query();
		},
		query() {
			this.dataListLoading = true;
			this.$http
				.post('/gov/access/menu/customerMenuList', {
					customerId: this.customerId,
					tableName: 'gov_menu'
				})
				.then(({ data: res }) => {
					this.dataListLoading = false;
					if (res.code !== 0) {
						this.dataList = [];
						this.total = 0;
						return this.$message.error(res.msg);
					}
					this.dataList = res.data;
				})
				.catch(() => {
					this.dataListLoading = false;
				});
		},

		initData(customerId, customerName) {
			this.customerId = customerId;
			this.customerName = customerName;
			// if (this.mixinViewModuleOptions.createdIsNeed) {
			//   console.log(this.customerId+"22222");
			this.query();
			// }
		},

		handelSelection(row) {
			this.multipleSelection = [];
			val.forEach(element => {
				this.multipleSelection.push(element.id);
			});
			console.log(this.multipleSelection);
		},
		// 取消
		diaCancel() {
			this.$emit('cancleBack');
		}
	}
};
</script>

<style>
.div_btn {
	margin: 0 0 20px 0;
}
</style>