Apiclound3 后端自定义Table+自定义查询

Teln_小凯

已于 2022-08-26 13:41:02 修改

阅读量345

点赞数

分类专栏： Apiclound3 文章标签：前端 javascript html

于 2022-08-24 22:09:15 首次发布

本文链接：https://blog.csdn.net/qq873113580/article/details/126513679

版权

Apiclound3 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

功能

1、表头、请求地址直接从数据库配置读取

2、分页+固定列头

3、自定义查询

4、动态控件

效果图

实现思路

1、获取数据库定义的列头：dataFiled

2、调用数据库配置的接口地址得到dataList

3、传入查询分页参数

实现代码

<template>
	<view class="page">
		<view class="table">
			<view class="table-tr" style="background-color:#114AA3;">
				<view v-for="(filed,index) in dataFiled" :key="index"
					:style="(index+1)==dataFiled.length?'border-right: 1px solid #e9e9e9':'color:black'"
					class="table-th">
					<text class="text" style="color:white;">{{filed.title}}</text>
				</view>
			</view>
		</view>
		<scroll-view scroll-y :show-scrollbar="false" class="b-order-list" onscrolltolower="onscrolltolower">
			<view class="table">

				<view v-for="(data,index) in dataList" :key="index"
					:style="(index+1)==dataList.length?'border-bottom: 1px solid #e9e9e9;':'color:black'"
					:class="(index%2)!=0?'table-tr gay':'table-tr'">

					<view v-for="(filed,i) in dataFiled" :key="i"
						:style="(i+1)==dataFiled.length?'border-right: 1px solid #e9e9e9':'color:black'"
						class="table-td">
						<text class="text">{{data[filed.field]}}</text>
					</view>

				</view>
			</view>
		</scroll-view>
	</view>
</template>
<script>

import { request } from '../../utils/request.js';
import $util from "../../utils/util.js";

export default {
	name: 'app_table',
	apiready() {
		console.log(JSON.stringify(api.pageParam));
		this.data.pageParam = api.pageParam;
		this.data.mqueryparam = this.data.pageParam.mqueryparam;
		for (var filed of this.data.pageParam.tabhead) {
			if (filed.mobgridvisible == true) {
				this.data.dataFiled.push(filed);
			}
		}
		this.getData();
		//查询按钮
		api.addEventListener({
			name: 'searchConfirm'
		}, (ret, err) => {
			//ret.value
			this.data.page = {
				pageNum: 1,
				pageSize: 20,
				total: 0
			}
			for (const key in ret.value){
				this.data.page[key] = ret.value[key];
			}
			console.log(JSON.stringify(this.data.page));
			this.getData();
		});
		//确定按钮
		api.addEventListener({
			name: 'navitembtn'
		}, (ret, err) => {
			var param = {
				name: 'app_search',
				url: "./app_search.stml",
				title: "查询条件",
				pageParam: this.data.mqueryparam,
				rightButtons: [{ text: '确定' }]
			};
			$util.openWin(param);
		});
	},
	data() {
		return {
			pageParam: {},
			dataFiled: [],
			dataList: [],
			mqueryparam: [],
			page: {
				pageNum: 1,
				pageSize: 20,
				total: 0
			},
		}
	},
	methods: {
		getData() {
			api.showProgress();
			request({
				url: this.pageParam.dataurl,
				param: this.page,
				method: 'get',
			}, (ret) => {
				api.hideProgress();
				this.dataList = this.dataList.concat(ret.rows);
				this.page.total = $util.calcPage(ret.total, this.page.pageNum);
			});
		},
		onscrolltolower() {
			console.log("滑动到最底部");
			if (this.page.pageNum >= this.page.total) {
				api.toast({
					msg: '没有更多信息了'
				});
				return;
			}
			this.page.pageNum++;
			this.getData();
		},
	}
}
</script>
<style scoped>
.page {
	width: 100%;
	height: 100%;
	padding-top: 1%;
}
.b-order-list {
	width: 100%;
	height: 100%;
}
.table {
	width: 98%;
	margin: 0px auto;
}
.border-right {
	border-right: 1px solid#e9e9e9;
}
.border-bottom {
	border-bottom: 1px solid #e9e9e9;
}
.table-tr {
	height: 45px;
	line-height: 45px;
	flex-direction: row;
	width: 100%;
	border-bottom: none;
	border-right: none;
	align-items: center;
}
.gay {
	background-color: rgb(209, 205, 205);
}
.table-th {
	font-weight: bold;
	height: 45px;
	line-height: 45px;
	border: 1px solid #e9e9e9;
	text-align: center;
	width: 33.33%;
	border-bottom: none;
	border-right: none;
	align-items: center;
	display: table-cell;
}
.table-td {
	padding-left: 10px;
	height: 45px;
	line-height: 45px;
	border: 1px solid #e9e9e9;
	text-align: center;
	width: 33.33%;
	border-bottom: none;
	border-right: none;
	align-items: center;
	display: table-cell;
}
.text {
	height: 45px;
	line-height: 45px;
}
</style>

查询页面的代码

<template>
	<view>
		<view class="horizontal" v-for="(com,index) in components" :key="index">
			<view class="text"><text>{{com.text}}：</text></view>
			<view class="com" v-if="com.type=='text'">
				<input keyboard-type="default" v-model="com.value" placeholder="请输入" />
			</view>
			<view class="com" v-if="com.type=='number'">
				<input keyboard-type="number" v-model="com.value" placeholder="请输入" />
			</view>
			<view class="com horizontal" v-if="com.type=='date'">
				<input disabled="true" keyboard-type="default" v-model="com.value" placeholder="请选择" />
				<view style="width:80px;padding-left:5px;" @click="openDate(com)">
					<a-iconfont style="font-size:30px;" name="riqi2" size="20" />
				</view>
			</view>
			<view class="com horizontal" v-if="com.type=='fixed-select'">
				<input disabled="true" keyboard-type="default" v-model="com.label" placeholder="请选择" />
				<view style="width:80px;padding-left:5px;">
					<a-iconfont style="font-size:30px;" name="search" size="20" @click="openSelect(com)" />
				</view>
			</view>
			<view class="com horizontal" v-if="com.type=='dic-select'">
				<input disabled="true" keyboard-type="default" v-model="com.label" placeholder="请选择" />
				<view style="width:80px;padding-left:5px;">
					<a-iconfont style="font-size:30px;" name="search" size="20" @click="openSelect(com)" />
				</view>
			</view>
		</view>
	</view>
</template>
<script>
import "../../components/act/a-cell";
import "../../components/act/a-calendar";
import "../../components/act/a-iconfont";
import "../../components/act/a-cell-group";
import "../../components/act/a-cell";
import "../../components/act/a-field";
import $util from "../../utils/util.js";

export default {
	name: 'app_search',
	data() {
		return {
			components: [],
			//当前组件
			currCom: null,
			formData: {

			}
		}
	},
	methods: {
		apiready() {
			this.data.components = api.pageParam;
			// this.data.components = [
			// 	{ "text": "工程名称", "filed": "gcmc", "type": "text", "value": "" },
			// 	{ "type": "number", "filed": "sxmje", "text": "项目金额(起)", "value": "" },
			// 	{ "type": "number", "filed": "exmje", "text": "项目金额(止)", "value": "" },
			// 	{ "type": "date", "filed": "skgrq", "text": "开工日期起", "value": "" },
			// 	{ "type": "date", "filed": "ekgrq", "text": "开工日期止", "value": "" },
			// 	{ "type": "fixed-select", "filed": "fiexdSelect", "text": "固定下拉", "value": "", "label": "", "selectData": [{ "dictLabel": "男", "dictValue": "1" }, { "dictLabel": "女", "dictValue": "0" }, { "dictLabel": "未知", "dictValue": "2" }] },
			// 	{ "type": "dic-select", "filed": "dicselect", "text": "字典下拉", "value": "", "label": "", "dicKey": "rzrq", "selectData": [] }
			// ]

			console.log(JSON.stringify(this.data.components))

			//确定
			api.addEventListener({
				name: 'navitembtn'
			}, (ret, err) => {
				for (var com of this.data.components) {
					this.data.formData[com.filed] = com.value;
				}
				console.log(JSON.stringify(this.data.formData));
				api.sendEvent({
					name: 'searchConfirm',
					extra: this.data.formData
				});
				api.closeWin();
			});
			//下拉框返回值
			api.addEventListener({
				name: 'selectConfirm'
			}, (ret, err) => {
				this.data.currCom.value = ret.value.dictValue;
				this.data.currCom.label = ret.value.dictLabel;
			});
		},
		openDate(com) {
			api.openPicker({
				type: 'date',
				title: '请选择日期'
			}, (ret, err) => {
				if (ret) {
					com.value = ret.year + "-" + $util.addZero(ret.month) + "-" + $util.addZero(ret.day);
				}
			});
		},
		//打开选择的
		openSelect(com) {
			this.currCom = com;
			var param = {
				name: 'app_select',
				url: "./app_select.stml",
				title: "下拉框选择",
				pageParam: com,
			};
			$util.openWin(param);
		}
	}
}
</script>
<style src='../../css/common.css'></style>
<style scoped>
.horizontal {
	flex-direction: row;
	margin-top: 5px;
}
.text {
	width: 130px;
	text-align: right;
	padding-top: 5px;
}
.com {
	flex: 1;
}
input {
	width: 98%;
	height: 35px;
	line-height: 35px;
	padding-left: 5px;
	border-radius: 5px;
}
</style>

弹窗选择代码

<template>
	<view class="page">
		<scroll-view scroll-y :show-scrollbar="false" class="b-order-list" onscrolltolower="onscrolltolower">
			<view class="table">

				<view v-for="(item,index) in dataList" :key="index" style="border-bottom: 1px solid #e9e9e9"
					class="table-tr">
					<view style="border-right: 1px solid #e9e9e9" class="table-td" @click="confirm(item)">
						<text class="text">{{item.dictLabel}}</text>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>
<script>

import { dict } from "../../api/dict";
import $util from "../../utils/util.js";

export default {
	name: 'app_select',
	apiready() {
		if (api.pageParam.type == "fixed-select") {
			this.data.dataList = api.pageParam.selectData;
		}
		if (api.pageParam.type == "dic-select") {
			dict.getDicts(api.pageParam.dicKey, (ret) => {
				if (ret.success && ret.data.length > 0) {
                    this.data.dataList=ret.data;
				}
			});
        }
	},
	data() {
		return {
			dataList: []
		}
	},
	methods: {
		confirm(item) {
			api.sendEvent({
				name: 'selectConfirm',
				extra: item
			});
			api.closeWin();
		}
	}
}
</script>
<style scoped>
.page {
	width: 100%;
	height: 100%;
	padding-top: 1%;
}
.b-order-list {
	width: 100%;
	height: 100%;
}
.table {
	width: 98%;
	margin: 0px auto;
}
.border-right {
	border-right: 1px solid#e9e9e9;
}
.border-bottom {
	border-bottom: 1px solid #e9e9e9;
}
.table-tr {
	height: 45px;
	line-height: 45px;
	flex-direction: row;
	width: 100%;
	border-bottom: none;
	border-right: none;
	align-items: center;
}
.gay {
	background-color: rgb(209, 205, 205);
}
.table-th {
	font-weight: bold;
	height: 45px;
	line-height: 45px;
	border: 1px solid #e9e9e9;
	text-align: center;
	width: 100%;
	border-bottom: none;
	border-right: none;
	align-items: center;
	display: table-cell;
}
.table-td {
	padding-left: 10px;
	height: 45px;
	line-height: 45px;
	border: 1px solid #e9e9e9;
	text-align: center;
	width: 100%;
	border-bottom: none;
	border-right: none;
	align-items: center;
	display: table-cell;
}
.text {
	height: 45px;
	line-height: 45px;
}
</style>