141 lines
3.0 KiB
Vue
141 lines
3.0 KiB
Vue
<template>
|
|
<div class="search-bar-container">
|
|
<el-card class="search-card" shadow="hover">
|
|
<el-row :gutter="12" align="middle">
|
|
<el-col :span="8">
|
|
<el-input
|
|
v-model="searchKeyword"
|
|
placeholder="请输入项目名称"
|
|
prefix-icon="el-icon-search"
|
|
clearable
|
|
size="medium"
|
|
@keyup.enter.native="handleSearch"
|
|
/>
|
|
</el-col>
|
|
<el-col :span="5">
|
|
<el-select
|
|
v-model="selectedStatus"
|
|
placeholder="项目状态"
|
|
clearable
|
|
size="medium"
|
|
style="width: 100%"
|
|
@change="handleStatusChange"
|
|
>
|
|
<el-option
|
|
v-for="item in statusOptions"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
/>
|
|
</el-select>
|
|
</el-col>
|
|
<el-col :span="4">
|
|
<el-button
|
|
type="primary"
|
|
icon="el-icon-search"
|
|
size="medium"
|
|
@click="handleSearch"
|
|
>搜索</el-button>
|
|
<el-button
|
|
icon="el-icon-refresh"
|
|
size="medium"
|
|
@click="handleReset"
|
|
>重置</el-button>
|
|
</el-col>
|
|
<el-col :span="7" style="text-align: right">
|
|
<el-button
|
|
type="primary"
|
|
icon="el-icon-plus"
|
|
size="medium"
|
|
@click="handleAdd"
|
|
>新建项目</el-button>
|
|
<el-button
|
|
icon="el-icon-folder-opened"
|
|
size="medium"
|
|
@click="handleImport"
|
|
>导入历史项目</el-button>
|
|
</el-col>
|
|
</el-row>
|
|
</el-card>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'SearchBar',
|
|
props: {
|
|
showSearch: {
|
|
type: Boolean,
|
|
default: true
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
searchKeyword: '',
|
|
selectedStatus: '',
|
|
statusOptions: [
|
|
{ label: '进行中', value: '0' },
|
|
{ label: '已完成', value: '1' },
|
|
{ label: '已归档', value: '2' }
|
|
]
|
|
}
|
|
},
|
|
methods: {
|
|
/** 搜索 */
|
|
handleSearch() {
|
|
this.emitQuery()
|
|
},
|
|
/** 状态变化 */
|
|
handleStatusChange() {
|
|
this.emitQuery()
|
|
},
|
|
/** 重置 */
|
|
handleReset() {
|
|
this.searchKeyword = ''
|
|
this.selectedStatus = ''
|
|
this.emitQuery()
|
|
},
|
|
/** 发送查询 */
|
|
emitQuery() {
|
|
this.$emit('query', {
|
|
projectName: this.searchKeyword || null,
|
|
status: this.selectedStatus || null
|
|
})
|
|
},
|
|
/** 新增 */
|
|
handleAdd() {
|
|
this.$emit('add')
|
|
},
|
|
/** 导入 */
|
|
handleImport() {
|
|
this.$emit('import')
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.search-bar-container {
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.search-card {
|
|
border-radius: 4px;
|
|
border: 1px solid #EBEEF5;
|
|
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
|
|
|
|
:deep(.el-card__body) {
|
|
padding: 12px 16px;
|
|
}
|
|
}
|
|
|
|
:deep(.el-button--medium) {
|
|
padding: 10px 16px;
|
|
margin-left: 8px;
|
|
|
|
&:first-child {
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
</style>
|