智慧农业后台管理页面
guoshilong
2022-11-08 082613d446e29e4ec1c16bfaa52345106a498b23
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<template>
  <el-select
    class="top-search"
    v-model="farm.id"
    placeholder="请选择所属农场"
    filterable
    @change="farmChange"
  >
    <el-option
      v-for="item in farmList"
      :key="item.id"
      :label="item.farmName"
      :value="item.id"
    >
    </el-option>
  </el-select>
</template>
 
<script>
import config from "../sidebar/config.js";
import { mapGetters } from "vuex";
import { getFarmList } from "@/api/farm/farm";
 
export default {
  name: "top-search",
  data() {
    return {
      config: config,
      value: "",
      farm: { id: 11 },
      farmList: [],
    };
  },
  created() {
    this.$EventBus.$on("setFarmId", this.farmChange);
 
    let ids = "";
    if (this.userInfo.role_name != "administrator") {
      ids = this.userInfo.farmId;
    }
    let params = {
      ids: ids,
    };
    getFarmList(params).then((res) => {
      this.farmList = res.data.data;
    });
    this.$nextTick(() => {
      this.farm.id = parseInt(this.userInfo.farmId.split(",")[0]);
      this.$store.commit("SET_FARMID", this.farm.id);
    });
  },
  computed: {
    ...mapGetters(["userInfo", "$farmId"]),
  },
  methods: {
    farmChange(data) {
      this.farm.id = data;
      this.$store.commit("SET_FARMID", data);
    },
  },
};
</script>
 
<style lang="scss">
.my-autocomplete {
  li {
    line-height: normal;
    padding: 7px;
 
    .icon {
      margin-right: 5px;
      display: inline-block;
      vertical-align: middle;
    }
 
    .name {
      display: inline-block;
      text-overflow: ellipsis;
      overflow: hidden;
      vertical-align: middle;
    }
 
    .addr {
      padding-top: 5px;
      width: 100%;
      font-size: 12px;
      color: #b4b4b4;
    }
 
    .highlighted .addr {
      color: #ddd;
    }
  }
}
</style>