xiaoshi_system/src/utils/model/retrieval/search.vue

<template>
  <div class="searchComponent">
    <div class="field">
      <el-select v-model="label" size="small" @change="getObject">
        <el-option v-for="item in SearchFields" :key="item.value" :label="item.label" :value="item.value"></el-option>
      </el-select>
    </div>
    <div class="value">
      <div v-if="field.type == 2" style="display: flex; width: 100%">
        <el-date-picker v-model="value" type="date" style="width: 100%" size="small" value-format="yyyy-MM-dd"
          :placeholder="getPlaceholder()">
        </el-date-picker>
      </div>
      <div v-else-if="field.type == 3" style="width: 100%">
        <el-select v-model="value" size="small" multiple filterable collapse-tags :placeholder="getPlaceholder()"
          style="width: 100%">
          <el-option v-for="item in field.options || []" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </div>
      <div v-else-if="field.type == 4" style="width: 100%">
        <el-select v-model="value" size="small" filterable :placeholder="getPlaceholder()"
          style="width: 100%">
          <el-option v-for="item in field.options || []" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </div>
      <div v-else style="width: 100%">
        <el-input size="small" style="width: 100%" v-model="value" :placeholder="getPlaceholder()"></el-input>
      </div>
    </div>
    <div class="btn">
      <el-button size="small" type="primary" @click="search" class="indicia-top-button" style="width:100%"
        :disabled="disabled">搜 索</el-button>
    </div>
    <div class="option" v-if="searchOptions.length > 0">
      <el-popover placement="bottom" title="" width="300" trigger="hover" class="margin-left_10">
        <div class="main">
          <div v-for="(item, index) in searchOptions" :key="index" class="box">
            <el-alert type="success" :closable="false">
              <div class="content">
                <span class="color-black">{{ item.label }}</span>
                <b class="padding_0_5">=</b>
                <span class="color-black">
                  <span v-if="item.type == 3">
                    <span class="padding_0_5">(</span>
                    <span v-for="(data, i) in item.searchValue" :key="data.label">
                      <span class="query-data-label" @click="handleCancelQueryParams(item, index, i)">{{ data.label }}<i
                          class="el-icon-close"></i></span>
                      <b v-if="item.searchValue.length - 1 > i" class="padding_0_5 color-primary">OR</b>
                    </span>
                    <span class="padding_0_5">)</span>
                  </span>
                  <span v-else>
                    <span class="query-data-label" @click="handleCancelQueryParams(item, index)">{{ item.searchValue.label
                    }}<i class="el-icon-close"></i></span>
                  </span>
                </span>
              </div>
            </el-alert>
          </div>
        </div>
        <el-button slot="reference" size="small" type="primary" style="width:100%">
          检索条件<i class="el-icon-arrow-down el-icon--right"></i>
        </el-button>
      </el-popover>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    SearchFields: {
      default: () => {
        return [];
      },
    },
    disabled: {
      default: false
    },
    searchValue: {
      default: () => {
        return {};
      },
    },
    projectId: {
      default:null
    },
    taskId: {
      default:null
    }
  },
  data() {
    return {
      inner: false,
      label: '',
      value: null,
      field: {},
      searchOptions: [],
      innerChange: false
    };
  },
  watch: {
    SearchFields() {
      if (this.innerChange) {
        return
      }
      this.getLabel()
    },
    searchValue: {
      deep: true,
      handler(n, o) {
        if (!this.inner) {
          this.getSearchOptions()
        } else {
          this.inner = false
        }

      }
    }
  },
  computed: {},
  created() { },
  mounted() {
    this.getLabel()
    this.getSearchOptions()
  },
  methods: {
    getSearchOptions() {
      this.searchOptions = []
      if (Object.keys(this.searchValue).length > 0) {
        Object.keys(this.searchValue).forEach(key => {
          if (this.searchValue[key] || (typeof this.searchValue[key] == 'object' && this.searchValue[key].length > 0)) {
            var field = this.SearchFields.find(item => {
              return item.value == key
            })
            if(!field){
              return false
            }
            if (typeof this.searchValue[key] == 'object') {
              this.searchOptions.push(
                {
                  ...field,
                  searchValue: field.options.filter(item => {
                    return this.searchValue[key].indexOf(item.value) != -1
                  })
                }
              )
            } else {
              this.searchOptions.push(
                {
                  ...field,
                  searchValue: {
                    label: this.searchValue[key]
                  }
                }
              )
            }
          }
        })
      }
    },
    getLabel() {
      if (this.SearchFields.length > 0) {
        this.label = this.SearchFields[0].value
        this.getObject(this.label)
      }
    },
    handleCancelQueryParams(data, index, i) {
      this.inner = true
      if (data.type == 3) {
        data.searchValue.splice(i, 1)
        if (data.searchValue.length == 0) {
          this.searchOptions.splice(index, 1)
        }
      } else {
        this.searchOptions.splice(index, 1)
      }
      this.$emit('search', this.searchOptions)
    },
    search() {
      this.inner = true
      if (this.value || this.value.length > 0) {
        var searchValue = {}
        if (this.field.type == 3) {
          searchValue = this.field.options.filter(item => {
            return this.value.indexOf(item.value) != -1
          })
        } else {
          searchValue = {
            label: this.value
          }
        }
        this.searchOptions.push(
          {
            ...this.field,
            searchValue: searchValue
          }
        )
        this.getValue()
      }

      this.$emit('search', this.searchOptions)
    },
    getObject(val) {
      this.field = this.SearchFields.find(item => {
        return item.value == val
      })
      this.getValue()
      this.getOption()
    },

    //获取选项
    getOption() {
      if (this.field.type == '3') {
        if (this.field.options && this.field.options.length > 0) {
          return false
        }
        switch (this.field.group) {
          case 'customField':
            this.getCustomField()
            break;
          case 'product':
            this.queryProductCategory(2)
            break;
          case 'productCategory':
            this.queryProductCategory(1)
            break;
          case 'technical':
            this.queryProductCategory(3)
            break;
          case 'nos':
            break;
          default:
            break
        }
      } else {
        return false
      }
    },
    //获取自定义选项
    getCustomField() {
      if (this.field.type == 'tree') {
        this.queryProductCategory(4)
        return false
      }
      let params = {
        customFieldId: this.field.value,
      }
      this.innerChange = true
      this.$api.queryCustomOption(params).then(response => {
        if (response.code == 200) {
          var a = response.data.data.map(item => {
            return {
              label: item.name,
              value: item.id
            }
          })
          this.$set(this.field, 'options', a)
          this.$nextTick(() => {
            this.innerChange = false
          })
          
        }
      }).catch(error => {
        // this.field.options = []
      })
    },
    //获取产品或产品类别架构以及技术分类
    queryProductCategory(type) {
      let params = {
        projectId: this.projectId,
        taskId: this.taskId,
        type: type,//类型：1产品类别，2产品，3技术分类，4自定义树
        typeId: this.field.value,//产品或类别id
      }
      this.innerChange = true
      this.$api.queryTreeNodeTree(params).then(res => {
        if (res.code == 200) {
          this.$set(this.field, 'options', response.data.data)
          this.$nextTick(() => {
            this.innerChange = false
          })
        }
      }).catch(err => {
        
      })
    },
    getValue() {
      if (this.field.type == 3) {
        this.value = []
      } else {
        this.value = ''
      }
    },
    getPlaceholder() {
      var placeholder = '请输入'
      if (this.field.placeholder) {
        placeholder = this.field.placeholder
      } else {
        if (this.field.type) {
          if (this.field.type == 1) {
            placeholder = '请输入'
          } else if (this.field.type == 2) {
            placeholder = '请选择时间'
          } else if (this.field.type == 3) {
            placeholder = '请选择'
          }
        }
      }
      return placeholder
    }
  },
};
</script>
<style lang="scss" scoped>
.main {
  padding: 0 !important;
  height: 250px;
  overflow-y: auto;

  .box {
    margin-top: 10px;

    .content {
      line-height: 30px;
      font-size: 14px;
    }
  }
}

.query-data-label {
  cursor: pointer;

  &:hover {
    text-decoration: underline;
    color: red;
  }
}

.searchComponent {
  padding: 0 10px;
  display: flex;
  // width: 100%;
}

.searchComponent>* {
  margin-right: 10px;
  width: 100%;
}

.value {
  width: 100%
}

.btn {
  width: 100px;
  margin-right: 0;
}

.field {
  max-width: 150px;
}

.option {
  width: 100px;
  margin-right: 0;
}
</style>