yxk_gk_master/components/system/chooseDeviceSingle.vue

<template>
	<view class="dialog_out" >
		<view class="dialog_container">
			<uni-icons type="closeempty" size="40" class="close_icon" @click="choose()"></uni-icons>
			<view class="dialog_title">选择设备</view>
			<view class="search_container">
				<view class="search_text">
					<input type="search" placeholder="请输入设备名称" v-model="search_data.name"/>
				</view>
				<view class="searchSelectBox" style=" width: 50%;">
					<sl-filter :ref="'slFilter'" :topFixed="fixed" :menuList.sync="menuList" @result="getFilter"></sl-filter>
				</view>
				<button @click="search(1)" type="primary">查询</button>
			</view>
			<view class="table_container">
				<t-table border=0>
					<t-tr font-size="18">
						<t-th>设备编号</t-th>
						<t-th>设备名称</t-th>
						<t-th>规格型号</t-th>
						<t-th>设备类型</t-th>
						<t-th>使用部门</t-th>
						<t-th>操作</t-th>
					</t-tr>
					<span @click="choose(items)" v-for="items in tableList" :key="items.userId" class="t-tr-span">
					<t-tr font-size="17" >
						<t-td>{{items.serialno}}</t-td>
						<t-td>{{items.name}}</t-td>
						<t-td>{{items.model}}</t-td>
						<t-td>{{items.type}}</t-td>
						<t-td>{{items.deptName}}</t-td>
						<t-td style="color: #007AFF;" ><button @click="choose(items)" type="primary" plain="true">选择</button></t-td>
					</t-tr>
					</span>
					<view v-if="show_nodata" class="nodata" style="text-align: center;font-size: 18px;color: #999;line-height: 40px;">暂无数据</view>

				</t-table>
				<uni-pagination show-icon="true" :pageSize="search_data.pagesize" :total="total_pages" :current="search_data.pageno" class="pagination" @change="changePages"></uni-pagination>
			</view>
		</view>
	</view>
</template>

<script>
import 'static/css/chooseDialog.css'
	import uniIcons from '@/components/uni-icons/uni-icons.vue'
	import xinsoftSlFilter from '@/components/xinsoft-sl-filter/xinsoft-sl-filter.vue';
	import slFilter from '@/components/xinsoft-sl-filter/xinsoft-sl-filter.vue';
	import tTable from '@/components/t-table/t-table.vue';
	import tTh from '@/components/t-table/t-th.vue';
	import tTr from '@/components/t-table/t-tr.vue';
	import tTd from '@/components/t-table/t-td.vue';
	import uniPagination from '@/components/uni-pagination/uni-pagination.vue';
	export default {
		components: {
			tTable,
			tTh,
			tTr,
			tTd,
			uniIcons,
			xinsoftSlFilter,
			slFilter,
			uniPagination
		},
		  props: {
		   // device_type:{}//设备类型
		   // deptId:'',
		  },
		data() {
			return {
				search_data:{
					type:'',
					name:"",
					pageno:1,//当前页数
					pagesize:4,//1页几条数据
					canUsed:0
				},
				device_type:'',//设备类型
				tableList: [],
				total_pages: 0, //总页数
				show_nodata: false,
				menuList: [
					{
						title: '设备类型',
						isMutiple: false,
						key: 'device_type',
						detailList: [],
						defaultSelectedIndex: []
					}
				],
				fixed: true,
				}
		},
		mounted(){
			this.search()	
			var _this = this;
			//设备类型
			this.$http
				.request({
					url: '/apis/dict/getDictsByType',
					params: {
						type: 'device_type'
					},
				})
				.then(res => {
					if (res.statusCode == '200') {
						_this.menuList[0].detailList = [
							{
								title: '不限',
								value: ''
							}
						];
						var useType = res.data.datas;
						for (let i = 0; i < useType.length; i++) {
							var myVal = {
								title: useType[i].name,
								value: useType[i].id
							};
							_this.menuList[0].detailList.push(myVal);
						}
					}
				})
				.catch(err => {});
		},
		methods: {
			//筛选条件
			getFilter(filterRes) {
				if(filterRes == '') {
					this.device_type = ""
				} else {
					this.device_type= filterRes.device_type
				}
				// this.to_search()
			},
			
			
			search(n) {
				// this.search_data.deptId = this.deptId;
				if(n==1){
					this.search_data.pageno=1;
				}
				if(this.device_type){
					this.search_data.type=this.device_type?this.device_type:''
				} else {
					this.search_data.type = ""
				}
			this.$http.request({
					url: '/apis/device/list',
					method: 'post',
					params: this.search_data,
				}).then(res => {
					if (res) {
						if (res.data.code == 0) {
							this.tableList = res.data.data ? res.data.data.datas : []
							if (this.tableList.length == 0) {
								this.show_nodata = true
							}
							this.total_pages = res.data.data ? res.data.data.totalPages * this.search_data.pagesize : 0
						}
					}
				});		
			},
			changePages(e) {
				this.search_data.pageno = e.current;
				this.search();

			},
			//点击选择
			choose(val){
				this.$emit("change", val);
			}
		},
		
		
	}
</script>
<style scoped>
	.dialog_out .search_container {
	    position: relative;
	    width: 100%;
	    box-sizing: border-box;
	    margin-top: 16px;
	    padding: 0px 60px !important;
	    overflow: auto;
	}
	.searchSelectBox {
		float: left;
	}
	.searchSelectBox .text {
		margin: 0px 3%;
		background: #f6f6f6;
		border-radius: 40px;
		width: 94%;
		line-height: 30px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-size: 14px;
		text-align: center;
		color: #333;
	}
</style>