作者：万一丁
万一丁 于 2017年9月2日11:57:44 编辑

通用查询-快速使用实例

该页主要用于理清前后端分别需要干的事情以及前端调用query组件时可以使用的一些参数值：
1.后端
后端需要提供sql查询语句[select的字段需要做到规范化(即select的字段都需要使用as)] 后端具体创建查询模板参见(后端通用查询文档)

2.前端
拿到后台生成的模板后id和code后，需要将id和code放在调用query组件的页面地址栏后作为参数
例如：http://localhost:8008/#/mgr/platform/query-list?templateId=3&templateCode=mgrplatform1143-3
这样页面加载时就会默认去调用组件的相关配置进行初始化

query组件前端开发使用参数：

Props	数据类型	说明
rowOperation	Array	自定义操作按钮
customColumn	Array	自定义列，用于数据需要以不同的形式展示时(例如状态[(0,1) => ('Draft','Submited')])
config	Object	默认的一些新增按钮及tag等设置
showOperation	Boolean	是否显示操作按钮，默认true
customTemplateId	Number/String	自定义模板id,不再使用地址栏中的id
customTemplateCode	String	自定义模板code,不再使用地址栏中的code
customBaseSettings	Object	自定义基础设置,具体参数配置见下面 [注：优先使用前端配置相关参数]
displayWay	String	三种展示方式(modal/onePageFixed/onePageFloat)，默认modal
rowSelectIdentification	String	当有单选/多选时，设置每一行数据的唯一标识符，默认id
autoLoadQueryData	Boolean	页面加载完成是否自动去加载表格数据，默认是true

使用实例：

	<s-pager>
		<div slot="work-area" class="row">
			<div class="col-sm-12 col-md-12 col-lg-12">
				<query
					@on-add-btn-click='newTemplate'
					@on-row-edit='rowEdit'
					@on-row-view='rowView'
					@on-row-delete='rowDelete'
					@on-row-preview='rowPreview'
					@on-row-list='rowTemplateList'
					:rowOperation="rowOperation"
					:customColumn="customColumn"
					:config="config"
					:showOperation="true"
					:customBaseSettings="customBaseSettings"
					:displayWay="displayWay"
					ref="query"
					:rowSelectIdentification="rowSelectIdentification"
					>
					<template slot="card-header-btn-additional">	// slot:card-header-btn-additional可用于自定义一些其它的操作按钮
						<e-button type="primary" @click="publishBtnClick" icon="plus">
							<span v-text="publish"></span>
						</e-button>
					</template>
				</query>
			</div>
		</div>
	</s-pager>

data () {
		return {
			customTemplateCode: 'mgrplatform1143-3',
			customTemplateId: 3,
			customBaseSettings: {
				viewComponent: 2,					// 1:Form   2:table    3:Search
				checkboxType: 3,					// 1:NoCheckbox		2:SingleSelct	3:MulteSelect
				paging: 10,							// pagenation number
				showColumnSelectable: true,			// 是否显示自定义列区域
				showColumnIndex: false,				// 是否显示index
				showImportButton: false,			// 是否显示导入按钮
				showExportButton: false,			// 是否显示导出按钮
				showCustomSearchCondition: true,	// 是否显示自定义查询条件区域
				showSaveSearchCondition: true		// 是否显示保存查询条件区域
			},
			displayWay: 'modal', // 展示方式：modal[弹出框]/onePageFixed[页面查询条件固定]/onePageFloat[页面查询条件可收缩]
			rowSelectIdentification: 'id',
			sections: [{
				id: '11'
			}, {
				id: '12'
			}],
			config: {
				hasAdd: true,
				hasTag: false
			},
			publish: '发布',
			rowOperation: [						// 行操作按钮[edit/view/delete拥有者默认展示图标],其余的操作按钮图标可以通过属性icon来进行自定义,visible可以接受boolean/function[返回true/false]来控制按钮是否显示与隐藏
				{
					type: 'edit',
					eventName: 'on-row-edit',
					visible: (row) => {
						return this.$route.query.templateId + '' === '3'
					},
					title: '编辑'
				}, {
					type: 'view',
					eventName: 'on-row-view',
					visible: true,
					title: '查看'
				}, {
					type: 'delete',
					eventName: 'on-row-delete',
					visible: (row) => {
						return row.id + '' !== '3'
					},
					title: '删除'
				}, {
					type: 'preview',
					eventName: 'on-row-preview',
					icon: 'paper-plane-o',
					visible: false,
					title: '预览'
				}, {
					type: 'list',
					eventName: 'on-row-list',
					icon: 'list-ul',
					visible: (row) => {
						return (this.$route.query.templateId + '' === '3') && (row.id + '' !== '3')
					},
					title: '列表'
				}
			],
			customColumn: [							// 自定义列，根据key的值来替换原有的默认数据展示方式
				{
					key: 'valid',
					render: (h, params) => {
						let color = params.row.valid === 1 ? 'green' : 'red'
						let text = params.row.valid === 1 ? '是' : '否'
						return h('Tag', {
							props: {
								color: color
							}
						}, text)
					}
				}
			]
		}
	},
	methods: {
		newTemplate () {
			this.$router.push('/mgr/platform/query-edit')
		},
		rowEdit (row) {
			this.$router.push({path: '/mgr/platform/query-edit', query: {templateId: row.id, templateCode: row.code}})
			console.log(row)
		},
		rowView (row) {
			this.$router.push({path: '/mgr/platform/query-view', query: {templateId: row.id, templateCode: row.code}})
			console.log('view')
			console.log(row)
		},
		rowDelete (row) {
			console.log('delete')
			console.log(row)
			this.$Modal.confirm({
				title: '删除',
				content: '<p>确认删除该条模板吗?</p><p>模板代码: ' + row.id + '</p><p>模板名称: ' + row.code + '</p>',
				onOk: () => {
					this.$http.post('/eldf.portal-service/frame_center/query/template/delete', {templateId: row.id}).then(({data}) => {
						if (data.success) {
							this.$Notice.success({
								title: '删除成功'
							})
							this.$refs.query.refresh()
						} else {
							this.$Notice.error({
								title: '删除失败',
								desc: data.message
							})
						}
					})
				}
			})
		},
		rowPreview (row) {
			console.log('preview')
			console.log(row)
		},
		rowTemplateList (row) {
			console.log(row)
			this.$router.push({path: '/mgr/platform/query-list', query: {templateId: row.id, templateCode: row.code}})
		},
		publishBtnClick () {
			console.log(this.$refs.query.getIdentificationList())
			console.log(this.$refs.query.getSelectionData())
		}
	},
	created () {
	}
}