ybxf-security-uniapp/pagesA/fire/personnel_permissions/index.vue

<template>
	<view class="container uni-container">
		<view class="uni-padding-wrap uni-common-mt">
			<uni-segmented-control :current="current" :values="items" style-type="text" active-color="rgb(25, 146, 148)"
				@clickItem="onClickItem" />
		</view>
		<view class="content">
			<view v-if="current === 0">
				<u-list @scrolltolower="scrolltolower">
					<u-list-item v-for="(item, index) in tableData" :key="index" link>
						<uni-row>
							<uni-col :span="8">
								<u-avatar shape="square" size="80" src="https://cdn.uviewui.com/uview/album/1.jpg"
									customStyle="margin: -3px 5px -3px 0"></u-avatar>
							</uni-col>
							<uni-col :span="17">
								<uni-row class="demo-uni-row padding-tb-sm" :gutter="20" width="100%">
									<uni-col :span="24" class="text-xl font-weight-700">{{ item.username }}</uni-col>
								</uni-row>
								<uni-row class="demo-uni-row padding-bottom-sm" :gutter="20" width="100%">
									<uni-col :span="24" class="text-cut text-grey1">用户昵称：{{ item.nickname }}</uni-col>
								</uni-row>
								<uni-row class="demo-uni-row padding-bottom-sm" :gutter="20" width="100%">
									<uni-col :span="24" class="text-cut text-grey1">部门：{{deptListTran(item.deptId) }}
									</uni-col>
								</uni-row>
								<uni-row class="demo-uni-row padding-bottom-sm" :gutter="20" width="100%">
									<uni-col :span="24" class="text-cut text-grey1">手机号码：{{ item.mobile }}</uni-col>
								</uni-row>
							</uni-col>
						</uni-row>
						<uni-row class="demo-uni-row  " :gutter="20" width="100%">
							<uni-col :span="24">
								<view class="card-actions">
							<!-- 		<view class="card-actions-item" @click="editClick(item)">
										<u-icon name="edit-pen" color="#999" size="18"></u-icon>
										<text class="card-actions-item-text">编辑</text>
									</view> -->
									<view class="card-actions-item" @click="roleClick(item)">
										<u-icon name="setting" color="#999" size="18"></u-icon>
										<text class="card-actions-item-text">分配角色</text>
									</view>
									<view class="card-actions-item" @click="passwordClick(item)">
										<u-icon name="lock" color="#999" size="18"></u-icon>
										<text class="card-actions-item-text">重置密码</text>
									</view>
								</view>
							</uni-col>
						</uni-row>
					</u-list-item>
				</u-list>
			</view>
			<view v-if="current === 1">
				<u-list @scrolltolower="scrolltolower">
					<u-list-item v-for="(item, index) in roleAppList" :key="index"  link>
						<uni-row>
							<uni-col :span="8">
								<u-avatar shape="square" size="80" src="https://cdn.uviewui.com/uview/album/1.jpg"
									customStyle="margin: -3px 5px -3px 0"></u-avatar>
							</uni-col>
							<uni-col :span="17">
								<uni-row class="demo-uni-row padding-tb-sm" :gutter="20" width="100%">
									<uni-col :span="24" class="text-xl font-weight-700">{{ item.roleName }}</uni-col>
								</uni-row>
								<uni-row class="demo-uni-row padding-bottom-sm" :gutter="20" width="100%">
									<uni-col :span="24" class="text-cut text-grey1">角色标识：{{ item.roleLable }}</uni-col>
								</uni-row>
								<uni-row class="demo-uni-row padding-bottom-sm" :gutter="20" width="100%">
									<uni-col :span="24" class="text-cut text-grey1">角色排序：{{item.roleSort }}
									</uni-col>
								</uni-row> 
							</uni-col>
						</uni-row>
						<uni-row class="demo-uni-row  " :gutter="20" width="100%">
								<!-- <uni-col :span="24">
									<view class="card-actions">
										<view class="card-actions-item" @click="editRoleClick(item)">
											<u-icon name="edit-pen" color="#999" size="18"></u-icon>
											<text class="card-actions-item-text">编辑</text>
										</view>
										<view class="card-actions-item" @click="menuClick(item)">
											<u-icon name="setting" color="#999" size="18"></u-icon>
											<text class="card-actions-item-text">分配菜单</text>
										</view> 
									</view>
								</uni-col> -->
							</uni-row>
						
					</u-list-item>
				</u-list>
			</view>
		</view>
		<u-modal :title="content" :show="showpassword" showCancelButton closeOnClickOverlay @confirm="confirm"
			@cancel="cancel" @close="close">
			<u--input v-model="password"></u--input>
		</u-modal>
		
		<!-- 加载中 -->
		<isLodingModel></isLodingModel>
	</view>
</template>

<script>

	let that = null;
	import {
		getUserPage, // 获取人员信息分页
		getDeptAllSimpleList, // 获取部门信息
		resetUserPwd ,// 用户密码重置 
		getAppRolesPage, // 获得移动端角色分页
	} from '@/api/personnel_permissions';
	export default {
		data() {
			return {
				current: 0,
				items: ['用户管理', '角色管理', ],
				// 数据
				tableData: [],
				// 每页数据量
				pageSize: 10,
				// 当前页
				pageNo: 1,
				// 数据总量
				total: 0,
				// tableData数据加载中
				loading: false,
				deptList: {},
				showpassword: false,
				content: '',
				password: '',
				roleId: '',
				// 角色
				roleAppList:[],
				roleAppList2:[], //只要专兼职
			};
		},
		watch: {
			loading: {
				handler(newLength, oldLength) {
					this.$modal.isLoadingModel(this.loading)
				},
				immediate: true
			}
		},
		// onLoad: function(option) {
		// 	this.getData(1);
		// },
		onShow() {
			this.tableData=[]
			this.getData(1); 
			this.getRoleData(1)
		},
		methods: {
			// =================数据转换==================
			deptListTran(val) {
				//status状态转换
				return this.deptList[val];
			},
			// ================================
			// tab头部点击
			onClickItem(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex;
				}
			},
			// 获取数据
			async getData(pageNo, value = '') {
				await getDeptAllSimpleList().then(response => {
					let list = response.data ? response.data : []
					list.map(i => {
						this.deptList[i.id] = i.name
					})
				})
				this.loading = true;
				this.pageNo = pageNo;
				getUserPage({
					pageNo: this.pageNo,
					pageSize: this.pageSize,
					// status: '1'
				}).then(response => { 
					// 为数据赋值：通过展开运算符的形式，进行新旧数据的拼接
					this.tableData = [...this.tableData, ...response.data.list];
					// this.tableData = response.data.list;
					this.total = response.data.total;
					this.loading = false;
				});
			},
			getRoleData(pageNo, value = ''){
				// 获得角色列表 
				this.pageNo = pageNo;
				getAppRolesPage({
					pageNo: this.pageNo,
					pageSize: this.pageSize,
					// status: '1'
				}).then(response => {
					// 处理 roleAppList 参数 	
					this.roleAppList = response.data.list;
				});
			},
			onClick(val) { 
			},
			// ==========用户信息相关========================================================================
			editClick(val) {
				uni.navigateTo({
					url: '/pagesA/fire/personnel_permissions/editUser/editUser?val=' + encodeURIComponent(JSON
						.stringify(val))
				});
			},
			roleClick(val) {
				uni.navigateTo({
					url: '/pagesA/fire/personnel_permissions/roleUser/roleUser?val=' + encodeURIComponent(JSON
						.stringify(val))
				});
			}, 
			passwordClick(val) {
				this.roleId = val.id
				this.showpassword = true
				this.content = "请输入" + `${val.username}` + "的新密码"
			},
			confirm(e) {
				this.showpassword = false
				resetUserPwd(this.roleId, this.password).then(response => {
					this.$modal.msg("修改成功")
				});
			},
			cancel() {
				this.showpassword = false 
			},
			close() {
				this.showpassword = false 
			},
			// ===================================================================================
			// ===================角色相关=========================================================
			editRoleClick(val){
				uni.navigateTo({
					url: '/pagesA/fire/personnel_permissions/editRole/editRole?val=' + encodeURIComponent(JSON
						.stringify(val))
				});
			},
			menuClick(val){
				uni.navigateTo({
					url: '/pagesA/fire/personnel_permissions/menuRole/menuRole?val=' + encodeURIComponent(JSON
						.stringify(val))
				});
			},
			// 
			// 触底的事件
			scrolltolower() {
				// 判断是否还有下一页数据
				if (this.pageNo * this.pageSize >= this.total) return uni.showToast({
					title: `数据加载完毕`
				});
				// 判断是否正在请求其它数据，如果是，则不发起额外的请求
				if (this.loading) return;
				this.pageNo += 1;
				this.getData(this.pageNo);
			}
		}
	};
</script>

<style>
</style>