wt_project_web_bak/src/views/home/component/owner_serach.vue

<template>
  <div class="flex flex-center padding white-bg ">
    <el-form v-model="form" class="lab mt-20 full-width" label-width="120px">
      <div class="flex">
        <div class="flex flex-col mr-15">
          <el-form-item class="full-width" label="项目名称">
            <el-input
                v-model="form.projectName"
                clearable
                placeholder="输入项目关键字"
                prefix-icon="Search"
            />
          </el-form-item>
          <div class="flex flex-center">
            <el-form-item class="full-width" label="是否开工">
              <el-select
                  v-model="form.projectType"
                  clearable
                  placeholder="选择项目分类"
                  style="width: 100%">
                <el-option
                    v-for="item in typeList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item class="full-width" label="是否入库">
              <el-select
                  v-model="form.projectType"
                  clearable
                  placeholder="选择项目分类"
                  style="width: 100%">
                <el-option
                    v-for="item in typeList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                />
              </el-select>
            </el-form-item>
          </div>
        </div>
        <div class="flex flex-col ml-20 mr-15">
          <el-form-item class="full-width" label="分类筛选">
            <el-select
                v-model="form.projectType"
                clearable
                placeholder="选择项目分类"
                style="width: 100%">
              <el-option
                  v-for="item in typeList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
              />
            </el-select>
          </el-form-item>
          <div class="flex flex-center">
            <el-form-item class="full-width" label="总投资额">
              <el-select
                  v-model="form.projectType"
                  clearable
                  placeholder="选择项目分类"
                  style="width: 100%">
                <el-option
                    v-for="item in typeList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item class="full-width" label="股（科）室">
              <el-select
                  v-model="form.projectType"
                  clearable
                  placeholder="选择项目分类"
                  style="width: 100%">
                <el-option
                    v-for="item in typeList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                />
              </el-select>
            </el-form-item>
          </div>
          <div class="flex flex-center flex-justify-end"
               style="width: 70%;margin-left: 120px">
          </div>
        </div>
        <div class="flex flex-center ml-20" style="margin-top: 28px">
          <base-button class="pointer mr-20" icon="Delete" title="清空" type="0" width="130" @click="clear"/>
          <base-button class="pointer" width="130" @click="sure"/>
        </div>

      </div>
    </el-form>
  </div>
</template>

<script>
import baseButton from '../../../components/base-button.vue'

export default {
  name: 'owner_serach',
  components: {baseButton},
  data() {
    return {
      form: {
        projectName: '', // 项目名称
        projectType: ''// 项目分类
      },
      typeList: []
    }
  },
  created() {
    this.getTypeList()
  },
  methods: {
    getTypeList() {
      this.$api.project.typeList().then(res => {
        this.typeList = res.data.records
      })
    },
    sure() {
      this.$bus.emit('serach', this.form)
    },
    clear() {
      this.form.projectType = ''
      this.form.name = ''
      this.$bus.emit('serach', this.form)
    }
  }
}
</script>

<style lang="scss" scoped>
.lab {
  :deep(.el-form-item__label) {
    color: #707070;
    font-size: 15px;
    font-weight: 500;
  }
}
</style>