343 lines
9.1 KiB
Vue
343 lines
9.1 KiB
Vue
<template>
|
|
<view class="_lnte" @tap="toggle">
|
|
<view class="_search">
|
|
<view v-if="!qshow" class="_itm">
|
|
<view class="itm" v-for="(item,index) in items" :key="index" :class="item.cls">{{item.txt}}</view>
|
|
</view>
|
|
<view v-if="qshow" class="_txt">{{lang('query.pselect')}}</view>
|
|
</view>
|
|
<view class="_sbtn" :class="{queryed}">
|
|
<view class="itm"></view>{{lang('query.btn_query')}}
|
|
</view>
|
|
</view>
|
|
<view :animation="anidatapop" v-if="qshow" class="_qshow">
|
|
<view :style="{height:qmtop+'px'}" @tap="close"></view>
|
|
<view class="_main">
|
|
<view class="_form" :style="{maxHeight: fheight + 'px'}">
|
|
<view class="ciy-form" v-for="(item,index) in qry" :key="index">
|
|
<label v-if="item.label != 'no'">{{item.name}}</label>
|
|
<view v-if="item.type == 'input'">
|
|
<ciy-input bb :name="item.form" v-model="data[item.form]" type="text"></ciy-input>
|
|
</view>
|
|
<view v-else-if="item.type == 'select'">
|
|
<ciy-select :name="item.form" v-model="data[item.form]"
|
|
:range="loadrange(gdict, item)"></ciy-select>
|
|
</view>
|
|
<view v-else-if="item.type == 'num'"
|
|
style="display:flex;align-items: center;justify-content: flex-end;">
|
|
<ciy-input bb :name="item.form + '_1'" v-model="data[item.form+'_1']" type="digit" style="width:4em;text-align:center;"></ciy-input>
|
|
<view style="margin-left:0.5em;">~</view>
|
|
<ciy-input bb :name="item.form + '_2'" v-model="data[item.form+'_2']" type="digit" style="width:4em;text-align:center;"></ciy-input>
|
|
</view>
|
|
<view v-else-if="item.type == 'bool'">
|
|
<ciy-selbool left :name="item.form" v-model="data[item.form]"></ciy-selbool>
|
|
</view>
|
|
<view v-else-if="item.type == 'radio'">
|
|
<ciy-radio left :name="item.form" v-model="data[item.form]" :range="loadrange(gdict, item)"></ciy-radio>
|
|
</view>
|
|
<view v-else-if="item.type == 'checkbox'">
|
|
<ciy-checkbox left :name="item.form" v-model="data[item.form]" :range="loadrange(gdict, item)"></ciy-checkbox>
|
|
</view>
|
|
<view v-else-if="item.type == 'daterange'">
|
|
<ciy-inputdaterange :name="item.form" v-model="data[item.form]"></ciy-inputdaterange>
|
|
</view>
|
|
<view v-else-if="item.type == 'day'">
|
|
<ciy-inputdatetime :name="item.form" v-model="data[item.form]"></ciy-inputdatetime>
|
|
</view>
|
|
<view v-else-if="item.type == 'month'">
|
|
<ciy-inputdatetime selectmonth :name="item.form" v-model="data[item.form]"></ciy-inputdatetime>
|
|
</view>
|
|
<view v-else>
|
|
<slot :itm="{item:item,data:data}"></slot>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="_bottombtn">
|
|
<button class="btn def" @tap="close">{{lang('query.btn_close')}}</button>
|
|
<button class="btn lg" @tap="submit">{{lang('query.btn_run')}}</button>
|
|
<button class="btn def" @tap="reset">{{lang('query.btn_reset')}}</button>
|
|
</view>
|
|
</view>
|
|
<view class="_mask" @tap="close"></view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
emits: ['confirm'],
|
|
props: {
|
|
qry: {
|
|
type: Object,
|
|
default: {}
|
|
},
|
|
gdict: {
|
|
type: Object,
|
|
default: {}
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
qshow: false,
|
|
qmtop:0,
|
|
fheight:0,
|
|
anidatapop: {},
|
|
data: {}
|
|
}
|
|
},
|
|
mounted() {},
|
|
computed: {
|
|
items() {
|
|
var itms = [];
|
|
for (var i in this.qry) {
|
|
if (this.hasdata(i))
|
|
itms.push({
|
|
txt: this.qry[i].name,
|
|
cls: '_valed'
|
|
});
|
|
}
|
|
for (var i in this.qry) {
|
|
if (!this.hasdata(i))
|
|
itms.push({
|
|
txt: this.qry[i].name,
|
|
cls: ''
|
|
});
|
|
}
|
|
return itms;
|
|
},
|
|
queryed() {
|
|
for (var i in this.qry) {
|
|
if (this.hasdata(i))
|
|
return '_queryed';
|
|
}
|
|
return '';
|
|
}
|
|
},
|
|
methods: {
|
|
toggle() {
|
|
if (this.qshow)
|
|
this.close();
|
|
else
|
|
this.open();
|
|
},
|
|
loadrange(gdict, item) {
|
|
var sels = [];
|
|
if (item.all)
|
|
sels.push({
|
|
id: '',
|
|
name: item.all
|
|
});
|
|
var gg = [];
|
|
if (item.select instanceof Array)
|
|
gg = item.select;
|
|
else {
|
|
if (item.select.substring(0, 5) == 'cata_') {
|
|
gg = gdict[item.select.substring(5)];
|
|
} else {
|
|
gg = gdict[item.select];
|
|
}
|
|
}
|
|
for (var i in gg) {
|
|
sels.push({
|
|
...gg[i]
|
|
});
|
|
}
|
|
return sels;
|
|
},
|
|
async open() {
|
|
this.pagenoscroll(true);
|
|
const {
|
|
headerheight,
|
|
footerheight
|
|
} = await this.com_gethdft();
|
|
var lnterect = await this.getrect('._lnte');
|
|
if (!lnterect)
|
|
return;
|
|
|
|
var app = getApp();
|
|
this.qmtop = lnterect.bottom;
|
|
this.fheight = app.globalData._sysinfo.windowHeight - lnterect.bottom - footerheight - 110;
|
|
this.qshow = true;
|
|
this.$nextTick(() => {
|
|
var animation = uni.createAnimation({
|
|
transformOrigin: "100% " + (lnterect.bottom - 60) + "px"
|
|
});
|
|
animation.scale(1);
|
|
animation.opacity(1);
|
|
animation.step({
|
|
duration: 200
|
|
});
|
|
this.anidatapop = animation.export();
|
|
});
|
|
},
|
|
close() {
|
|
this.pagenoscroll(false);
|
|
var animation = uni.createAnimation({
|
|
transformOrigin: "100% " + (this.qmtop - 60) + "px"
|
|
});
|
|
|
|
animation.scale(0);
|
|
animation.opacity(0);
|
|
animation.step({
|
|
duration: 200
|
|
});
|
|
this.anidatapop = animation.export();
|
|
setTimeout(() => {
|
|
this.qshow = false;
|
|
}, 300);
|
|
},
|
|
hasdata(idx) {
|
|
var form = this.qry[idx].form;
|
|
if (this.qry[idx].type == 'num') {
|
|
return this.data[form + '_1'] || this.data[form + '_2'];
|
|
} else if (this.qry[idx].type == 'bool') {
|
|
return this.data[form] == 1;
|
|
} else {
|
|
return !!this.data[form];
|
|
}
|
|
},
|
|
reset() {
|
|
for (var i in this.data) {
|
|
delete this.data[i];
|
|
}
|
|
this.$emit("confirm", {});
|
|
this.close();
|
|
},
|
|
submit() {
|
|
// #ifndef APP-PLUS
|
|
uni.hideKeyboard();
|
|
// #endif
|
|
// #ifdef APP-PLUS
|
|
plus.key.hideSoftKeybord();
|
|
// #endif
|
|
this.$emit("confirm", {...this.data});
|
|
this.close();
|
|
},
|
|
setdata(where){
|
|
if(!where)
|
|
return;
|
|
for(var i in this.data){
|
|
if(where[i])
|
|
this.data[i] = where[i];
|
|
}
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
<style scoped>
|
|
._qshow {
|
|
position: fixed;
|
|
left: 0;
|
|
right: 0;
|
|
opacity: 0;
|
|
top: 0;
|
|
transform-origin: 100% 0;
|
|
transform: scale(0);
|
|
}
|
|
|
|
._qshow>._main {
|
|
border-radius: 0 0 1em 1em;
|
|
background: linear-gradient(0deg, var(--man3), var(--bg1));
|
|
padding: 0 1em;
|
|
border-bottom: 2px solid var(--man7);
|
|
}
|
|
|
|
._qshow>._mask {
|
|
height: 100vh;
|
|
backdrop-filter: blur(2px);
|
|
}
|
|
|
|
._qshow ._form {
|
|
overflow: auto;
|
|
}
|
|
|
|
._qshow ._bottombtn {
|
|
margin: 1em 0px;
|
|
display: flex;
|
|
width: 100%;
|
|
align-items: flex-end;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
._lnte {
|
|
display: flex;
|
|
padding: 0.5em;
|
|
background: var(--bg2);
|
|
align-items: center;
|
|
border-bottom: 1px solid var(--bg5);
|
|
height: 3.5em;
|
|
}
|
|
|
|
._lnte ._search {
|
|
flex: 1;
|
|
position: relative;
|
|
display: flex;
|
|
overflow-x: auto;
|
|
overflow-y: hidden;
|
|
}
|
|
|
|
._lnte ._search ._itm {
|
|
display: flex;
|
|
overflow-x: auto;
|
|
overflow-y: hidden;
|
|
}
|
|
|
|
._lnte ._search ._itm>.itm {
|
|
margin: 0.2em;
|
|
border-radius: 1em;
|
|
border: 1px solid var(--bg6);
|
|
color: var(--txt1);
|
|
padding: 0 0.5em;
|
|
line-height: 1.5em;
|
|
font-size: 0.8em;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
._lnte ._search ._itm>.itm._valed {
|
|
border: 1px solid transparent;
|
|
background-clip: padding-box, border-box;
|
|
background-origin: padding-box, border-box;
|
|
background-image: linear-gradient(to right, var(--bg1), var(--bg1)), linear-gradient(331deg, var(--man5), var(--man7));
|
|
color: var(--man6);
|
|
}
|
|
|
|
._lnte ._search::after {
|
|
content: ' ';
|
|
position: absolute;
|
|
bottom: 0;
|
|
right: 0;
|
|
top: 0;
|
|
width: 4em;
|
|
background: linear-gradient(90deg, transparent, var(--bg2));
|
|
}
|
|
|
|
._lnte ._search ._txt {
|
|
background: linear-gradient(331deg, var(--man5), var(--man7));
|
|
background-clip: text;
|
|
-webkit-background-clip: text;
|
|
color: transparent;
|
|
letter-spacing: 0.1em;
|
|
font-size: 0.9em;
|
|
font-weight: bolder;
|
|
padding-left: 1em;
|
|
}
|
|
|
|
._lnte ._sbtn {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 0.8em;
|
|
margin: 0 0.5em;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
._lnte ._sbtn._queryed {
|
|
opacity: 1;
|
|
}
|
|
|
|
._lnte ._sbtn>.itm {
|
|
width: 1.8em;
|
|
height: 1.8em;
|
|
margin-right: 0.5em;
|
|
display: inline-block;
|
|
background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAyNCAxMDI0IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTc0Ny45IDk4LjVIMjc2LjFjLTQ4LjUgMC03NC45IDU2LjctNDMuNiA5My44TDM2MiAzNDUuOHY0MDkuNmgwLjJjLTEuNSAxNS4yIDUuNyAzMC42IDE5LjggMzguN2wyMTguNSAxMjYuMWMxOS4xIDExIDQzLjYgNC41IDU0LjYtMTQuNnM0LjUtNDMuNi0xNC42LTU0LjZMNDQyIDczNi4zVjM0NS44YzAtMTguOS02LjctMzcuMS0xOC44LTUxLjZsLTk3LjYtMTE1LjdoMzcyLjlsLTk3LjYgMTE1LjdjLTEyLjIgMTQuNC0xOC44IDMyLjctMTguOCA1MS42djU5LjRjMCAyMi4xIDE3LjkgNDAgNDAgNDBzNDAtMTcuOSA0MC00MHYtNTkuNGwxMjkuNS0xNTMuNWMzMS4xLTM3LjEgNC44LTkzLjgtNDMuNy05My44eiIgZmlsbD0iIzRhNWZlMiI+PC9wYXRoPjxwYXRoIGQ9Ik02ODIgNDY0LjNINTYyYy0yMi4xIDAtNDAgMTcuOS00MCA0MHMxNy45IDQwIDQwIDQwaDEyMGMyMi4xIDAgNDAtMTcuOSA0MC00MCAwLTIyLTE3LjktNDAtNDAtNDB6TTY4MiA1ODIuM0g1NjJjLTIyLjEgMC00MCAxNy45LTQwIDQwczE3LjkgNDAgNDAgNDBoMTIwYzIyLjEgMCA0MC0xNy45IDQwLTQwIDAtMjItMTcuOS00MC00MC00MHpNNjgyIDcwMC4zSDU2MmMtMjIuMSAwLTQwIDE3LjktNDAgNDBzMTcuOSA0MCA0MCA0MGgxMjBjMjIuMSAwIDQwLTE3LjkgNDAtNDAgMC0yMi0xNy45LTQwLTQwLTQweiIgZmlsbD0iIzdjNDRlMiI+PC9wYXRoPjwvc3ZnPg==");
|
|
}
|
|
</style> |