207 lines
5.6 KiB
Vue
207 lines
5.6 KiB
Vue
<!-- 搜索表单 -->
|
|
<template>
|
|
<div class="base-search-form">
|
|
<el-form :size="size" :inline="true" :label-width="labelWidth">
|
|
<el-form-item
|
|
v-for="item in searchForm"
|
|
:key="item.prop"
|
|
:label="item.label"
|
|
>
|
|
<!-- 输入框 -->
|
|
<el-input
|
|
v-if="item.type === 'Input'"
|
|
v-model="searchData[item.prop]"
|
|
:placeholder="item.placeholder"
|
|
size="mini"
|
|
:style="{ width: item.width }"
|
|
:readonly="item.readonly"
|
|
clearable
|
|
/>
|
|
<!-- 下拉框 -->
|
|
<el-select
|
|
v-if="item.type === 'Select'"
|
|
v-model="searchData[item.prop]"
|
|
:placeholder="item.placeholder"
|
|
size="mini"
|
|
clearable
|
|
:style="{ width: item.width }"
|
|
@change="item.change && item.change(that, searchData[item.prop])"
|
|
>
|
|
<el-option
|
|
v-for="op in item.options"
|
|
:key="op[item.props['label']]"
|
|
:label="op[item.props['label']]"
|
|
:value="op[item.props['value']]"
|
|
/>
|
|
</el-select>
|
|
<el-select
|
|
v-if="item.type === 'Select2'"
|
|
v-model="searchData[item.prop]"
|
|
:placeholder="item.placeholder"
|
|
size="mini"
|
|
clearable
|
|
:style="{ width: item.width }"
|
|
@change="item.change && item.change(that, searchData[item.prop])"
|
|
>
|
|
<el-option
|
|
v-for="(key, value) of item.options"
|
|
:key="key"
|
|
:label="key"
|
|
:value="value"
|
|
/>
|
|
</el-select>
|
|
<!-- 单选 -->
|
|
<el-radio-group
|
|
v-if="item.type === 'Radio'"
|
|
v-model="searchData[item.prop]"
|
|
:style="{ width: item.width }"
|
|
>
|
|
<el-radio
|
|
v-for="ra in item.radios"
|
|
:key="ra.value"
|
|
:label="ra.value"
|
|
>{{ ra.label }}</el-radio
|
|
>
|
|
</el-radio-group>
|
|
<!-- 单选按钮 -->
|
|
<el-radio-group
|
|
v-if="item.type === 'RadioButton'"
|
|
v-model="searchData[item.prop]"
|
|
:style="{ width: item.width }"
|
|
@change="item.change && item.change(searchData[item.prop])"
|
|
>
|
|
<el-radio-button
|
|
v-for="ra in item.radios"
|
|
:key="ra.value"
|
|
:label="ra.value"
|
|
>{{ ra.label }}</el-radio-button
|
|
>
|
|
</el-radio-group>
|
|
<!-- 复选框 -->
|
|
<el-checkbox-group
|
|
v-if="item.type === 'Checkbox'"
|
|
v-model="searchData[item.prop]"
|
|
:style="{ width: item.width }"
|
|
>
|
|
<el-checkbox
|
|
v-for="ch in item.checkboxs"
|
|
:key="ch.value"
|
|
:label="ch.value"
|
|
>{{ ch.label }}</el-checkbox
|
|
>
|
|
</el-checkbox-group>
|
|
<!-- 日期 -->
|
|
<el-date-picker
|
|
v-if="item.type === 'Date'"
|
|
v-model="searchData[item.prop]"
|
|
:placeholder="item.placeholder"
|
|
:style="{ width: item.width }"
|
|
value-format="yyyy-MM-dd"
|
|
format="yyyy-MM-dd"
|
|
:picker-options="item.pickerOption"
|
|
clearable
|
|
/>
|
|
<!-- 时间 -->
|
|
<el-time-select
|
|
v-if="item.type === 'Time'"
|
|
v-model="searchData[item.prop]"
|
|
:placeholder="item.placeholder"
|
|
type=""
|
|
:style="{ width: item.width }"
|
|
clearable
|
|
/>
|
|
<!-- 日期时间 -->
|
|
<el-date-picker
|
|
v-if="item.type === 'DateTime'"
|
|
v-model="searchData[item.prop]"
|
|
:placeholder="item.placeholder"
|
|
type="datetime"
|
|
:disabled="item.disable && item.disable(searchData[item.prop])"
|
|
:style="{ width: item.width }"
|
|
clearable
|
|
/>
|
|
<!-- 日期时间段 -->
|
|
<el-date-picker
|
|
v-if="item.type === 'Daterange'"
|
|
v-model="searchData[item.prop]"
|
|
type="datetimerange"
|
|
range-separator="-"
|
|
:start-placeholder="$t('trials:uploadClinicalData:table:beginDate')"
|
|
:end-placeholder="$t('trials:uploadClinicalData:table:endDate')"
|
|
:style="{ width: item.width }"
|
|
clearable
|
|
/>
|
|
<!-- 滑块 -->
|
|
<!-- <el-slider v-if="item.type==='Slider'" v-model="searchData[item.prop]"></el-slider> -->
|
|
<!-- 开关 -->
|
|
<el-switch
|
|
v-if="item.type === 'Switch'"
|
|
v-model="searchData[item.prop]"
|
|
:style="{ width: item.width }"
|
|
/>
|
|
<!-- 具名slot -->
|
|
<slot v-if="item.type === 'Custom'" :name="item.slot" />
|
|
</el-form-item>
|
|
<el-form-item v-for="item in searchHandle" :key="item.label">
|
|
<slot v-if="item.slot" :name="item.slot" />
|
|
<el-button
|
|
v-else
|
|
:type="item.type"
|
|
:size="item.size || size"
|
|
:icon="item.icon || ''"
|
|
@click="handleClick(item.emitKey)"
|
|
>{{ item.label }}</el-button
|
|
>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
that: {
|
|
type: Object,
|
|
default: this,
|
|
},
|
|
isHandle: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
labelWidth: {
|
|
type: String,
|
|
default: "",
|
|
},
|
|
size: {
|
|
type: String,
|
|
default: "mini",
|
|
},
|
|
searchForm: {
|
|
type: Array,
|
|
default: () => [],
|
|
},
|
|
searchHandle: {
|
|
type: Array,
|
|
default: () => [],
|
|
},
|
|
searchData: {
|
|
type: Object,
|
|
default: () => {},
|
|
},
|
|
},
|
|
methods: {
|
|
handleClick(emitKey) {
|
|
// emit事件
|
|
this.$emit(`${emitKey}`);
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style lang="scss">
|
|
.base-search-form {
|
|
.el-form-item {
|
|
margin-bottom: 0px;
|
|
}
|
|
}
|
|
</style>
|