tianmucloudmobile/pages/user/index.vue

<template>
	<view class="work-container">
		<view class="header">
			<u-search placeholder="请输入客户名称" :clearabled="true" @clear="searchDept" @custom="searchDept"
				v-model="search.deptName" @search="searchDept"></u-search>
		</view>
		<scroll-view
      scroll-y
      style="height: 100vh"
      @scrolltolower="loadMore">
			<uni-card v-if="item.parentId !==0" v-for="item in displayList" :title="item.deptName"
				:extra="item.createTime">

				<view style="position: relative">
					<view>联系人:{{item.leader}}</view>
					<view>联系电话:{{item.phone}}</view>
					<view style="width: 50px;position: absolute;right:-10px;bottom:0px"><u-button @click="toUser(item)"
							type="primary" :plain="true" size="mini" text="查看人员"></u-button>
					</view>

					<view style="width: 50px;position: absolute;right:90rpx;bottom:0rpx"><u-button type="success"
							@click="toDeviceList(item)" :plain="true" size="mini" text="查看设备"></u-button>
					</view>
					<view style="width: 50px;position: absolute;right:200rpx;bottom:0rpx"><u-button type="warning "
							@click="toDel(item)" :plain="true" size="mini" text="删除客户"></u-button>
					</view>
				</view>

			</uni-card>
      <view v-if="loading" class="loading">加载中...</view>
      <view v-if="allLoaded" class="no-more">没有更多了</view>
    </scroll-view>
		<view style="position: fixed;bottom: 0px;text-align: center;width: 100%">
			<u-button type="primary" text="新增客户" @click="newUser"></u-button>
		</view>
		<u-modal :show="showAdd " title="客户信息" @cancel="closeDlg" :showCancelButton="true" @confirm="doAddUser">
			<view class="slot-content">
				<u--form labelPosition="left" :model="model1" ref="s">
					<u-form-item label="客户名称：" prop="chooseUser.deptName" borderBottom ref="item1" labelWidth="auto">
						<u--input v-model="chooseUser.deptName" border="none"></u--input>
					</u-form-item>
					<u-form-item label="联系人：" prop="chooseUser.nickName" borderBottom ref="item1" labelWidth="auto">
						<u--input v-model="chooseUser.nickName" border="none"></u--input>
					</u-form-item>

					<u-form-item label="手机号：" prop="chooseUser.phonenumber" borderBottom ref="item1" labelWidth="auto">
						<u--input v-model="chooseUser.phonenumber" border="none"></u--input>
					</u-form-item>

					<u-form-item label="密码：" prop="chooseUser.password" borderBottom ref="item1" labelWidth="auto">
						<u--input v-if="showAdd" v-model="chooseUser.password" border="none"></u--input>
					</u-form-item>
					<u-form-item label="登录账号：" borderBottom ref="item1" labelWidth="auto">
						<u--input v-model="chooseUser.phonenumber" border="none" disabled></u--input>
					</u-form-item>
					<u-form-item label="状态：" prop="chooseUser.password" borderBottom ref="item1" labelWidth="auto">
						<u-radio-group v-model="statusValue" placement="row">
							<u-radio v-for="(item, index) in statusList" :key="index" :label="item.name"
								:name="item.name" @change="statusChange">
							</u-radio>
						</u-radio-group>
					</u-form-item>
					<u-form-item label="显示排序：" prop="chooseUser.orderNum" borderBottom ref="item1" labelWidth="auto">
						<uni-number-box v-model="chooseUser.orderNum" />
					</u-form-item>
				</u--form>

			</view>
		</u-modal>
	</view>
</template>

<script>
	import authObj from '@/plugins/auth.js';
	import {
		getDeptList,
		getUserListByDept
	} from '@/api/user/user';
	import {
		addDeptAndUser,
		delDept
	} from '@/api/dept/dept'
	import {
		unbind
	} from '@/api/device/device.js'
	import UText from "../../uni_modules/uview-ui/components/u-text/u-text";
	import {
		checkStr
	} from "@/utils/validate.js"
	export default {
		components: {
			UText
		},
		data() {
			return {
				deptList: [],
        displayList:[],
        loading:false,
        allLoaded :false,
        pageSize:50,
        currentPage:1,
        search: {
					deptName: ""
				},
				statusList: [{
						name: '启用',
						disabled: false
					},
					{
						name: '禁用',
						disabled: false
					}
				],
				statusValue: '启用',
				//showEdit: false,
				showAdd: false,
				chooseUser: {},
			}
		},
		onLoad() {
			this.getDeptList();
		},
		methods: {
			newUser() {
				this.showAdd = true;
				this.chooseUser.orderNum = 1
			},
			closeDlg() {
				console.log('closeDlg>>>>>>>')
				this.showAdd = false;
				this.chooseUser = {};
			},
			statusChange(e) {
				console.log(e);
			},
			searchDept() {
				this.getDeptList();
			},
			toUser(item) {
				uni.navigateTo({
					url: '/pages/user/list?deptId=' + item.deptId
				});
			},
			toDeviceList(item) {
				uni.navigateTo({
					url: '/subpkg/device/index?deptId=' + item.deptId
				});
			},
			//删除客户，并删除客户下的用户信息和解绑设备
			toDel(item){
				let self=this
				uni.showModal({
				  title: '提示',
				  content: "删除客户信息并解绑设备？",
				  confirmText:'取消',
				  confirmColor:'#2979ff',
				  cancelText:'确定',
				  cancelColor:'#ed1c24',
				  success: function (res) {
				    if (res.confirm) {
				     console.log('取消'+JSON.stringify(item));
				    } else if (res.cancel) {
				      console.log('用户点击确定'+JSON.stringify(item));
					  unbind(item.deptId).then(res=>{
						  uni.showToast({
						  	title: '操作成功',
						  	icon: 'none',
						  	duration: 1500
						  })
						  location.reload()
					  })
				    }
				  }
				});
			},
      loadMore() {
        if (this.loading || this.allLoaded) return

        this.loading = true
        setTimeout(() => {
          const start = this.currentPage * this.pageSize
          const end = start + this.pageSize
          const nextPageData = this.deptList.slice(start, end)

          if (nextPageData.length === 0) {
            this.allLoaded = true
          } else {
            this.displayList = this.displayList.concat(nextPageData)
            this.currentPage++
          }

          this.loading = false
        }, 300) // 模拟加载时间，实际可以去掉
      },
			getDeptList() {
				getDeptList(this.search.deptName).then(res => {
					this.deptList = res.data;
          this.displayList = this.deptList.slice(0, 50)

        });
			},
			doAddUser() {
				let self = this;
				this.chooseUser.postIds = [];
				if (this.statusValue == '启用') {
					this.chooseUser.status = 0;
				} else {
					this.chooseUser.status = 1;
				}
				if (!checkStr(this.chooseUser.phonenumber, 'mobile')) {
					uni.showToast({
						title: '手机号码格式有误',
						icon: 'none',
						duration: 1000
					})
				} else {
					this.chooseUser.userName = this.chooseUser.phonenumber
					if (this.showAdd) {
						addDeptAndUser(this.chooseUser).then(res => {
							uni.showToast({
								title: '操作成功',
								icon: 'none',
								duration: 1500
							})
							self.closeDlg();
							location.reload()
						}).catch(res => {
							console.log('close>>>>>>erro')
						})
					}
				}
			},
		}
	}
</script>

<style lang="scss">
	/* #ifndef APP-NVUE */
	.u-collapse-content {
		display: flex;
		flex-direction: column;
	}

	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #fff;
		min-height: 100%;
		height: auto;
	}

	view {
		font-size: 14px;
		line-height: inherit;
	}

	/* #endif */

	.text {
		text-align: center;
		font-size: 26rpx;
		margin-top: 10rpx;
	}

	.grid-item-box {
		flex: 1;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}

	.uni-margin-wrap {
		width: 690rpx;
		width: 100%;
		;
	}

	.swiper {
		height: 300rpx;
	}

	.swiper-box {
		height: 150px;
	}

	.swiper-item {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: center;
		align-items: center;
		color: #fff;
		height: 300rpx;
		line-height: 300rpx;
	}

	@media screen and (min-width: 500px) {
		.uni-swiper-dot-box {
			width: 400px;
			/* #ifndef APP-NVUE */
			margin: 0 auto;
			/* #endif */
			margin-top: 8px;
		}

		.image {
			width: 100%;
		}
	}
</style>