java/cath-app/pages/menu/report/popup/commonpopup.vue

<template>
	<view class="pop-container">
		<uni-popup ref="popup" type="dialog" >
			<uni-popup-dialog 
				:title="title" 
				message="" 
				:duration="2000" 
				:before-close="true" 
				@close="handleCancel" 
				@confirm="handleOk">
				<view class="dialog-content">
					<view class="header-container">
						<uni-row class="demo-uni-row">
							<uni-col :span="5" style="padding-left: 10px;text-align: center" >
								<view  class="gjz-title">关键字</view>
							</uni-col>
							<uni-col :span="19">
								<uni-search-bar
									v-model="keyWord"
									 @input="input"
									 @cancel="cancel" 
									 @clear="clear" 
									  cancelButton="none"
								 />
							</uni-col>
						</uni-row>
						<uni-row class="demo-uni-row">
							<uni-col :span="24" style="text-align: center;">
								<button class="mini-btn" type="primary" size="mini"  @click="search">查询</button>
							</uni-col>
						</uni-row>
					</view> 
					<view style="height: 200px">
						 <zb-table
						 ref="zbTable"
						 :show-header="true"
						 :stripe="false"
						 :columns="column"
						 :data="data"
						 :highlight="true"
						 @currentChange="currentChange"
						 :border="true"
					    >
						 
						</zb-table> 
					</view>
				</view>
				<!-- <view slot="footer">
				  <button type="primary" @click="handleOk">确定</button>
				  <button @click="handleCancel">取消</button>
				</view> -->
			</uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import { getDicts } from "@/api/system/dict/data"; // 字典
	import { listWarehouse } from "@/api/wms/report.js";
	
	export default {
		props: {
		  title: {
		    type: String,
		    required: true
		  },
		  idxFlag:{
			type: String,
			required: true
		  },
		  formData:{
			type: Object,
			require: true
		  }
		},
		mounted() {
			
		},
		created: function(option) {
			
		},
		data() {
			return {
				currentFlag: '',
				keyWord: '', // 输入查询的值
				column: [],	 // 表头数据
				data: [], // 表体数据
				currentSelectData: {},  //当前选中数据行
				
			};
		},
		methods:{
			handleOk() {
				let returnData = {
					currentFlag: this.currentFlag,
					selectData: this.currentSelectData
				}
				this.$emit("sendData", returnData);
			      // 点击确定按钮的处理逻辑
				this.currentSelectData = {}
			    this.$refs.popup.close()
			},
			handleCancel() {
			  // 点击取消按钮的处理逻辑
			  this.$refs.popup.close()
			},
			showPopup() {
				// 传递的哪个跳转标志位
				this.currentFlag = this.idxFlag;
				let that = this;
				let cFlag = that.idxFlag;
				switch (cFlag){
					case "ware": // 仓库
						// 部门表头
						that.column = [
						  { name: 'warehouseCode', label:'仓库编码', width:120,align:'center', emptyString:'--' },
						  { name: 'warehouseName', label:'仓库名称', width:100,align:'center', emptyString:'--'},
						];
						that.getWareList();
						break;
					default:
						break;
				}
			
			},
			hidePopup() {
				this.$refs.popup.close();
			},
			// 单选当前行
			currentChange(row,index){
				this.currentSelectData = row;
		    },
			// searchBar
			input(value) {// uniSearchBar 的 value 改变时触发事件，返回参数为uniSearchBar的 value	e=value
				this.keyWord = value;
			},
			clear(res) {
				this.keyWord = "";
			},
			cancel(res) {
				this.keyWord = "";
			},
			// 查询按钮点击事件
			search(){
				let that = this;
				let cFlag = that.currentFlag;
				
				switch (cFlag){
					case "ware": // 任务编码
						this.getCkList();
						break;
					default:
						break;
				}
			},
			// 获取部门数据
			getWareList(){
				let that = this;
				let params = {
					status: '0', //(固定)
					params: {
						"keyWord":that.keyWord,
						"limit":50
					},
				}
				listWarehouse(params).then(res => {
					console.log(res)
					if(res.code === 200){
						that.data = res.rows;
						this.$refs.popup.open();
					}
				});
				
			},
		},
	}
</script>

<style>
	@import "@/static/scss/commonpopup.css"
</style>