172 lines
3.7 KiB
Vue
172 lines
3.7 KiB
Vue
<template>
|
||
<ciy-header ref="header" title="ciy-query组件"></ciy-header>
|
||
<view>
|
||
<view class="ciy-card">
|
||
<view class="title">多搜索项栏</view>
|
||
<view class="content">
|
||
<view class="tip">
|
||
组合搜索功能，支持文本框、下拉、开关、单选、多选、数字范围、日期范围、按月、按日。<br />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="sti" :style="{top:(header_statusbar_height+header_title_height)+'px'}">
|
||
<ciy-query ref="query" :gdict="gdict" :qry="qryinput" @confirm="query_confirm">
|
||
<template v-slot="{itm}">
|
||
<ciy-input :name="itm.item.form" v-model="itm.data[itm.item.form]" style="display: inline-block;border-bottom: 2px solid #cc0000;width:4em"></ciy-input>
|
||
</template>
|
||
</ciy-query>
|
||
</view>
|
||
<view class="ciy-card" v-if="formdata">
|
||
<view class="content">
|
||
<view v-html="tobr(formdata)" class="formdata"></view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="ciy-card">
|
||
<view class="title">属性</view>
|
||
<view class="content">
|
||
<view class="slt">扩展自定义选项</view>
|
||
<view class="hr"></view>
|
||
<view class="prp">qry</view>
|
||
<view class="tip">
|
||
查询选项[{}, {}, ...]。<br />
|
||
type: 类型。input, select, num, bool, radio, checkbox, daterange, month, day, 自定slot<br />
|
||
name: 标题<br />
|
||
form: 表单名<br />
|
||
all: select/radio默认选项名<br />
|
||
select: 字典信息<br />
|
||
</view>
|
||
<view class="hr"></view>
|
||
<view class="prp">gdict</view>
|
||
<view class="tip">
|
||
字典对象{}。<br />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="ciy-card">
|
||
<view class="title">方法</view>
|
||
<view class="content">
|
||
无
|
||
</view>
|
||
</view>
|
||
<view class="ciy-card">
|
||
<view class="title">事件</view>
|
||
<view class="content">
|
||
<view class="evt">@confirm</view>
|
||
<view class="tip">
|
||
执行查询事件<br />
|
||
</view>
|
||
<view class="hr"></view>
|
||
<view class="log" v-for="(item, index) in eventlog" :key="index">
|
||
<text class="code">{{eventlog.length - index}}</text>
|
||
{{item}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="hr"></view>
|
||
</view>
|
||
<ciy-tabbar ref="tabbar"></ciy-tabbar>
|
||
</template>
|
||
|
||
<style scoped>
|
||
@import '@/pages/demo/zdemo.css';
|
||
</style>
|
||
|
||
<script>
|
||
import zmixin from '@/pages/demo/zmixin.js';
|
||
export default {
|
||
mixins: [zmixin],
|
||
data() {
|
||
return {
|
||
gdict: {
|
||
dictsel: [{
|
||
id: 1,
|
||
name: '选项1'
|
||
}, {
|
||
id: 2,
|
||
name: '选项2'
|
||
}]
|
||
},
|
||
qryinput: [{
|
||
type: 'input',
|
||
name: '文本',
|
||
form: 'txt'
|
||
}, {
|
||
type: 'select',
|
||
name: '选择1',
|
||
form: 'sel1',
|
||
select: 'dictsel',
|
||
all: '全部'
|
||
}, {
|
||
type: 'select',
|
||
name: '选择2',
|
||
form: 'sel2',
|
||
all: '全部',
|
||
select: [{
|
||
id: 3,
|
||
name: '直传选项3'
|
||
}, {
|
||
id: 4,
|
||
name: '直传选项4'
|
||
}]
|
||
}, {
|
||
type: 'num',
|
||
name: '范围',
|
||
form: 'rnum',
|
||
}, {
|
||
type: 'bool',
|
||
name: '开关',
|
||
form: 'bol',
|
||
}, {
|
||
type: 'radio',
|
||
name: '单选',
|
||
form: 'rad',
|
||
all: '全部',
|
||
select: [{
|
||
id: 1,
|
||
name: '单1'
|
||
}, {
|
||
id: 2,
|
||
name: '单2'
|
||
}]
|
||
}, {
|
||
type: 'checkbox',
|
||
name: '多选',
|
||
form: 'chk',
|
||
select: [{
|
||
id: 1,
|
||
name: '多1'
|
||
}, {
|
||
id: 2,
|
||
name: '多2'
|
||
}, {
|
||
id: 3,
|
||
name: '多3'
|
||
}]
|
||
}, {
|
||
type: 'daterange',
|
||
name: '日期',
|
||
form: 'date',
|
||
}, {
|
||
type: 'month',
|
||
name: '按月',
|
||
form: 'month',
|
||
}, {
|
||
type: 'day',
|
||
name: '按日',
|
||
form: 'day',
|
||
}, {
|
||
type: 'cot',
|
||
name: '自定',
|
||
form: 'formcot',
|
||
}]
|
||
}
|
||
},
|
||
onLoad() {},
|
||
methods: {
|
||
query_confirm(e) {
|
||
this.formdata = JSON.stringify(e, null, ' ') + '';
|
||
}
|
||
}
|
||
}
|
||
</script> |