welfare-admin/src/components/SearchCom/index.vue

78 lines
2.7 KiB
Vue

<template>
<a-form layout="inline" :model="form" ref="queryForm">
<a-row :gutter="48">
<a-col :md="6" :sm="24" v-for="(item, index) in list" :key="index">
<a-form-item :label="item.placeholder" :style="{marginBottom: '8px'}">
<!-- input -->
<a-input v-if="item.type === 'input'" v-model="form[item.key]" :type="item.type || 'text'" :placeholder="item.placeholder || '请输入'" :allowClear="true" />
<!-- select-common -->
<a-select v-if="item.type === 'select'" v-model="form[item.key]" placeholder="请选择" :allowClear="true" :mode="item.mode ? item.mode : 'default'">
<a-select-option v-for="(j, k) in item.options" :key="`${index}-${k}`" :value="j.id">{{ j.name }}</a-select-option>
</a-select>
<!-- select-dictionary -->
<a-select v-if="item.type === 'select-dic'" v-model="form[item.key]" placeholder="请选择" :allowClear="true" :mode="item.mode ? item.mode : 'default'">
<a-select-option v-for="(j, k) in item.options" :key="`${index}-${k}`" :value="j.value">{{ j.name }}</a-select-option>
</a-select>
<!-- select-dictionary-tree -->
<a-tree-select v-if="item.type === 'select-dic-tree'" v-model="form[item.key]" :tree-data="item.options" placeholder="请选择" :allowClear="true" :multiple="item.mode ? true : false"></a-tree-select>
<!-- date -->
<a-date-picker v-if="item.type === 'date'" v-model="form[item.key]" style="width: 100%" :format="item.format" :valueFormat="item.format" :placeholder="item.placeholder || '请输入日期'" />
</a-form-item>
</a-col>
<a-col :md="6" :sm="24">
<a-button type="primary" @click="handleQuery">查询</a-button>
<a-button @click="resetQuery">重置</a-button>
</a-col>
<!-- orgTree -->
<!-- <a-col :span="24" :style="{marginTop: '-8px', marginBottom: '8px'}" v-show="orgTree.ifshow">
<org-tree :startOrganizationId="orgTree.startOrganizationId" @getSelectTreeKey="key => form[orgTree.formKey] = key"></org-tree>
</a-col> -->
</a-row>
</a-form>
</template>
<script>
import orgTree from '../OrgTree/Index'
export default {
components: { orgTree },
props: {
form: {
type: Object,
required: true,
default: () => ({})
},
list: {
type: Array,
required: true,
default: () => []
},
orgTree: {
type: Object,
required: false,
default: () => { return { ifshow: false, formKey: '', startOrganizationId: '' } }
}
},
data() {
return {}
},
methods: {
handleQuery() {
this.$emit('search')
},
resetQuery() {
this.$emit('reset')
}
}
}
</script>
<style lang="less" scoped>
</style>