jztAdmin/src/components/userLists/index.vue

<template>
	<div class="goodList">
		<Form ref="pagination" :model="formValidate" @submit.native.prevent>
			<FormItem label="用户昵称：" label-for="title">
				<Input v-model="formValidate.nickname" placeholder="请输入用户昵称" class="input-add mr14" />
				<Button type="primary" @click="userSearchs()">查询</Button>
			</FormItem>
		</Form>
		<Table ref="table" no-data-text="暂无数据" @on-select-all="selectAll" @on-select-all-cancel="cancelAll"
			@on-select="TableSelectRow" @on-select-cancel="TableSelectCancelRow" no-filtered-data-text="暂无筛选结果"
			:columns="columns4" :data="tableList" :loading="loading" class="mr-20" height="500">
			<template slot-scope="{ row }" slot="avatar">
				<viewer>
					<div class="tabBox_img">
						<img v-lazy="row.headimgurl||row.user.headimgurl" />
					</div>
				</viewer>
			</template>
			<template slot-scope="{ row, index }" slot="user_type">
			  <span v-if="row.user_type === 'wechat'">公众号</span>
			  <span v-if="row.user_type === 'routine'">小程序</span>
			  <span v-if="row.user_type === 'h5'">H5</span>
			  <span v-if="row.user_type === 'pc'">PC</span>
			</template>
		</Table>
		<div class="acea-row row-right page">
			<Page :total="total" show-elevator show-total @on-change="pageChange" :page-size="formValidate.limit" />
		</div>
		<div class="footer" slot="footer" >
			<Button type="primary" size="large" :loading="modal_loading" long @click="ok">确定</Button>
		</div>
	</div>
</template>

<script>
	import { kefucreateApi } from "@/api/setting";
	import {
		mapState
	} from "vuex";
	import {
		getYgList
	} from '@/api/store'
	export default {
		name: "index",
		props: {
			is_reservation: {
				type: Number,
				default: 1
			},
		},
		data() {
			return {
				//选中商品集合
				selectEquips: [],
				// 选中的id集合
				selectEquipsIds: [],
				cateIds: [],
				modal_loading: false,
				formValidate: {
					page: 1,
					limit: 10,
					nickname: ''
				},
				total: 0,
				loading: false,
				tableList: [],
				columns4: [{
						type: 'selection',
						width: 60,
						align: 'center'
					},
					{
						title: "用户UID",
						key: "uid",
						width: 60,
					},
					{
						title: "头像",
						slot: "avatar",
						width: 60,
					},
					{
						title: "昵称",
						key: "nickname",
						minWidth: 80,
					},
					// {
					// 	title: "别称",
					// 	key: "alias",
					// 	minWidth: 80,
					// },
					{
					  title: "用户类型",
					  slot: "user_type",
					  minWidth: 100,
					},
					// {
					// 	title: "创建时间",
					// 	key: "create_time",
					// 	minWidth: 100,
					// },
				],
				images: [],
			};
		},
		created() {
		},
		mounted() {
			this.getList();
		},
		methods: {
			// 判断是否选中
			sortData() {
				if (this.selectEquipsIds.length) {
					this.tableList.forEach(ele => {
						if (this.selectEquipsIds.includes(ele.id)) ele._checked = true;
					})
				}
			},
			// 选中一行
			TableSelectRow(selection, row) {
				console.log(selection, row,'selection, row')
				if (!this.selectEquipsIds.includes(row.uid)) {
					this.selectEquipsIds.push(row.uid);
					this.selectEquips.push(row);
				}
			},
			// 取消选中一行
			TableSelectCancelRow(selection, row) {
				var _index = this.selectEquipsIds.indexOf(row.uid);
				if (_index != -1) {
					this.selectEquipsIds.splice(_index, 1);
					this.selectEquips.splice(_index, 1);
				}
			},
			// 选中所有
			selectAll() {
				for (let i = this.tableList.length - 1; i >= 0; i--) {
					this.TableSelectRow(null, this.tableList[i]);
				}
			},
			// 取消选中所有
			cancelAll() {
				for (let i = this.tableList.length - 1; i >= 0; i--) {
					this.TableSelectCancelRow(null, this.tableList[i]);
				}
			},
			pageChange(index) {
				this.formValidate.page = index;
				this.getList();
			},
			// 列表
			getList() {
				this.loading = true;
					kefucreateApi(this.formValidate)
						.then(async (res) => {
							let data = res.data;
							this.tableList = data.list;
							this.total = res.data.count;
							this.sortData();
							this.loading = false;
						})
						.catch((res) => {
							this.loading = false;
							this.$Message.error(res.msg);
						});
			},
			changeCheckbox(selection) {
				let images = [];
				selection.forEach(function(item) {
					let imageObject = {
						image: item.image,
						product_id: item.id,
						store_name: item.store_name,
						temp_id: item.temp_id
					};
					images.push(imageObject);
				});
				this.images = images;
				this.$emit("getProductDiy", selection);
			},
			ok() {
				console.log("getProductId", this.selectEquips)
				this.$emit("getProductId", this.selectEquips);
			},
			treeSearchs(value) {
				this.formValidate.page = 1;
				this.getList();
			},
			// 表格搜索
			userSearchs() {
				this.formValidate.page = 1;
				this.getList();
			},
			clear() {
			},
		},
	};
</script>

<style scoped lang="stylus">
	/deep/.ivu-table-header thead tr th {
		padding: 8px 5px;
	}

	/deep/.ivu-radio-wrapper {
		margin-right: 0 !important;
	}

	.footer {
		margin: 15px 0;
	}

	.tabBox_img {
		width: 36px;
		height: 36px;
		border-radius: 100px;
		overflow: hidden;
		cursor: pointer;

		img {
			width: 100%;
			height: 100%;
		}
	}

	.tabform {
		>>>.ivu-form-item {
			margin-bottom: 16px !important;
		}
	}

	.btn {
		margin-top: 20px;
		float: right;
	}

	.goodList {}

	.mr-20 {
		margin-right: 10px;
	}
</style>