uniProject/pages/admin/Jiazheng/kechengBind.vue

<template>
	<view class="phone-list-page kc-bind-page">
		<view class="phone-navBar-box">
			<view @click="goUpPage" class="nav-bar-icon"></view>
			<text class="nav-bar-title">家政人员</text>
			<uni-icons class="nav-bar-right-icon bar-ml10" type="search" @click="searchBtn" size="20"></uni-icons>
		</view>
		<v-tabs v-model="current" :tabs="tabs" :scroll="false" @change="changeTab" field="name"
			class="admin-tab-box"></v-tabs>
		<view v-if="current ==0" class="jiazheng-search-box">
			<view @click.stop="clickAlltype" class="select-item-box">
				<text>{{leixing}}</text>
				<icon class="select-jt-default" />
			</view>
		</view>
		<view class="kc-bind-scroll-view scroll-top-border" v-if="current ==0">
			<uni-list class="admin-list-box">
				<uni-list-item v-for="item in list" class="admin-list-item-box">
					<template v-slot:body>
						<view @click="lookUserInfo(item)" class="kecheng-list-card">
							<img :src="item.pic">
							<view class="item-card-row">
								<view class="ks-item-top">
									<view class="kc-name">{{item.name}}</view>
								</view>
								<view class="ks-totalTm kc-fenlei">
									<icon class="phone-fenlei-icon" />分类：{{item.kcClassifyName}}
								</view>
								<button class="kc-bind-btn phone-green-btn" type="default" size="mini"
									@click.stop="toAdd(item)">绑定</button>
							</view>
						</view>
					</template>
				</uni-list-item>
			</uni-list>
		</view>
		<view class="kc-notbind-scroll-view scroll-top-border" v-if="current ==1">
			<uni-list class="admin-list-box">
				<uni-list-item v-for="item in listYx" class="admin-list-item-box">
					<template v-slot:body>
						<view @click="lookUserInfo(item)" class="kecheng-list-card">
							<img :src="item.pic" v-if="item.pic">
							<view class="item-card-row">
								<view class="ks-item-top">
									<view class="kc-name">{{item.name}}</view>
								</view>
								<!-- <view class="ks-totalTm kc-fenlei">
									<icon class="phone-fenlei-icon" />分类：{{item.kcClassifyName}}
								</view> -->
								<view class="bind-btn-row">
									<button type="default" size="mini" class="kc-bind-btn phone-green-btn"
										@click.stop="toDelete(item)">重置</button>			
									<button type="default" size="mini" class="kc-bind-btn phone-white-btn"
										@click.stop="toDelete(item)">删除</button>
								</view>
							</view>
						</view>
					</template>
				</uni-list-item>
			</uni-list>
		</view>
		<common-dialog ref="commonDialogRef" :title="deleteTitle" :content="deleteConcent"
			@confirm-btn="deleteQuerenBtn"></common-dialog>
		<kechengLeixingVue ref="kclxRef" @select="handleSelectLeixing" @reset="handleResetLeixing"></kechengLeixingVue>
		<searchVue ref="searchRef" @search-btn="handleSearchFromBtn"></searchVue>
	</view>
</template>

<script>
	import {
		ref
	} from "vue";
	import {
		kcSelectList,
		jiazhengKcList,
		jiazhengKcAdd,
		jiazhengKcDelete,
		getAdminClassify
	} from "@/api/jiazheng.js";
	import commonDialog from '@/components/dialog/commonDialog.vue';
	import kechengLeixingVue from "./common/kechengLeixing.vue";
	import searchVue from "./common/search2.vue";
	import {
		debounce
	} from "@/utils/common";
	export default {
		data() {
			return {
				leixing: '全部类型',
				leixingList: [],
				selectClassify: null,
				kcClassifyId: 0,
				id: '',
				name: '',
				current: 0,
				list: [],
				listYx: [],
				deleteTitle: '删除',
				kcId: '',
				deleteConcent: '你确定要执行这个操作吗',
				tabs: [{
						id: 1,
						name: '未绑定课程',

					},
					{
						id: 2,
						name: '已绑定课程',

					},
				],
			}
		},
		components: {
			commonDialog,
			kechengLeixingVue,
			searchVue
		},
		onLoad(options) {
			this.id = options.id
			this.getList()
			this.getKechengClassify()
		},
		methods: {
			toReset(data){
				
			},
			searchBtn() {
				this.$refs.searchRef.handleShow()
			},
			
			handleSearchFromBtn(textD) {
				this.name = textD;
				this.getList()
			},
			handleResetLeixing() {
				this.selectClassify = null;
				this.leixing = '全部类型';
				this.getList()
			},
			handleSelectLeixing(item) {
				this.leixing = item.lable;
				this.selectClassify = item;
				this.getList()
			},
			clickAlltype() {
				this.$refs.kclxRef.showPopup({
					data: this.leixingList
				})
			},
			getKechengClassify() {
				getAdminClassify().then(res => {
					res.data.children.forEach(item => {
						item.checked = false;
					})
					this.leixingList = res.data.children || [];
				})
			},
			toAdd(data) {
				debounce(()=>{
					let req = {
						kcIds: [data.kcId],
						id: this.id
					}
					jiazhengKcAdd(req).then(res => {
						if (res.code == 0) {
							this.getList()
							uni.showToast({
								title: '添加成功',
								icon: 'success'
							});
						} else {
							uni.showToast({
								title: '添加失败',
								icon: 'success'
							});
							return false
						}
					})
				},500)
			
			},
			deleteQuerenBtn() {
				let req = {
					kcId: this.kcId,
					id: this.id
				}
				jiazhengKcDelete(req).then(res => {
					if (res.code == 0) {
						this.getYxList()
						uni.showToast({
							title: '删除成功',
							icon: 'success'
						});
					} else {
						uni.showToast({
							title: '删除失败',
							icon: 'success'
						});
						return false
					}
				})
			},
			toDelete(data) {
				this.kcId = data.kcId
				this.$refs.commonDialogRef.handleShow();
			},
			changeTab(data) {
				this.current = data
				if (this.current == 0) {
					this.getList()
				} else {
					this.getYxList()
				}

				console.log('data', data);
			},
			goUpPage() {
				uni.redirectTo({
					url: "/pages/admin/Jiazheng/index"
				})
			},
			getList() {
				let req = {
					id: this.id,
					"kcClassifyId": this.selectClassify && this.selectClassify.id || 0,
					name:this.name
				}
				kcSelectList(req).then(res => {
					if (res.code == 0) {
						this.list = res.data
					} else {
						return false
					}
				})
			},
			getYxList() {
				let req = {
					id: this.id,
				}
				jiazhengKcList(req).then(res => {
					if (res.code == 0) {
						this.listYx = res.data
					} else {
						return false
					}
				})
			}
		}
	}
</script>