
<!--
/**
  * 表单通用组件
  *	@example1:
		1, 引入
			import cuTable from '@/components/cuTable';

		2, 注册
			export default {
				components: {
					cuTable
				},
				data() {
					return {
						Dict:{selectList:[]},
						table:{
							page: 1,
							size: 10,
							total: 0,
							loading: false,
							dataList:[],
						},
						rules: {},
					}
				},
				mounted(){
					// 获取基本信息
					this.pageApi = Config.getModuleInfo(this);
					this.Dict = this.pageApi.Dict;
					this.form.config = this.pageApi.config;
					this.rules = reqApi.getRules(this.Dict.baseInfo) || (this.Dict.rules || {});
				},
				methods: {
					loadData(searchItem) {
						var that = this;
						//reqApi.common.getRequst.call(this, searchItem);
					},
				}
			}

		3, 创建
			<cu-table
				ref="cuTable"
				:table="table"
				:Dict="Dict"
				:config="form.config"
			/>

		#4, 使用
  * @author: Kimber
  * @createtime: 2022/4/22(周五)
  */
-->
<template>
	<!--工具栏-->
	<div class="head-container" v-if="form.config.search && form.config.search[0]">
		<!-- 搜索 -->
		<template v-for="(item, index) in form.config.search">
			<label v-if="item.name && item.showLabel" class="el-form-item-label">{{item.name}}</label>
			<template v-if="item.type==='string'">
				<el-input v-model="form.query[item.word]" clearable :placeholder="item.name" :style="'width:'+item.width" @clear="item.clear && item.clear.call(_self.$parent)"/>
			</template>
			<template v-if="item.type==='select'">
				<el-select v-model="form.query[item.word]" :placeholder="item.name" size="small" :style="'width:'+(item.width || 'auto')" :disabled="item.disabled" :multiple="(item.mode===9)" clearable @change="onEventInfos(item.change)" @clear="item.clear && item.clear.call(_self.$parent)">
					<el-option v-for="obj in Dict.selectList[item.word]" :label="obj[item.key] || obj.name" :value="obj[item.val] || obj.value" ></el-option>
				</el-select>
			</template>
			<template v-else-if="item.type === 'checkbox'">
				<el-checkbox v-model="form.query[item.word]" :label="item.label"></el-checkbox>
			</template>
			<template v-else-if="item.type.indexOf('date') > -1">
				<el-date-picker 
					v-model="form.query[item.word]"
					:style="'width:'+item.width"
					:type="item.datetype || item.type"
					:value-format="item.format || 'yyyy-MM-dd'"
					:default-time="item.defaultTime"
					range-separator="至"
					start-placeholder="开始日期"
					end-placeholder="结束日期"
					clearable
					@change="item.change && item.change.call(_self.$parent, $event)"
					:placeholder="'请选择'+item.name"
				>
				</el-date-picker>
			</template>
			<el-button v-else-if="item.type==='button'" size="mini" :type="item.btntype || 'success'" :icon="item.icon" @click="item.click && item.click.call(_self.$parent, $event)">{{item.label}}</el-button>
		</template>
	</div>
</template>
<script>
export default {
	data() {
		return {
		}
	},
	props:{
		form: {
			type: Object,
			default: {},
		},
		Dict: {
			type: Object,
			default: {},
		},
	},
	beforeCreate(){
	},
	created(){
	},
	mounted() {
	},
	methods: {
		onEventInfos:qf.Vue.onEventInfos,
	},
}
</script>
<style lang="scss" scope>
	.head-container{
		.el-form-item-label{
			font-weight:500;margin-left:15px;line-height:normal;
			&:first-child{margin-left:0;}
		}
		.el-button{margin-left:20px;}
		.el-checkbox{margin-right:5px;}
	}
</style>
