ccdi/ruoyi-ui/src/views/ccdiProject/components/SearchBar.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-button
              slot="append"
              icon="el-icon-search"
              @click="handleSearch"
            >搜索</el-button>
          </el-input>
        </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="11" 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()
    },
    /** 发送查询 */
    emitQuery() {
      this.$emit('query', {
        projectName: this.searchKeyword || null,
        status: this.selectedStatus || null
      })
    },
    /** 新增 */
    handleAdd() {
      this.$emit('add')
    },
    /** 导入 */
    handleImport() {
      this.$emit('import')
    }
  },
  watch: {
    searchKeyword(newVal) {
      if (newVal === '') {
        this.emitQuery()
      }
    }
  }
}
</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-input-group__append) {
  background-color: #409EFF;
  color: white;
  border-color: #409EFF;
  cursor: pointer;

  &:hover {
    background-color: #66b1ff;
  }
}

:deep(.el-button--medium) {
  padding: 10px 16px;
}
</style>