下拉框公共组件

一、公共部分

1、定义的下拉框公共组件

<template>
  <div>
      <el-select v-model="values" placeholder="请选择" clearable size="medium" :style="widthStyle" @change="setOptions">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
  </div>
</template>
<script>
  import {
    getOptionsByType
  } from "@/api/commom/collection";
  export default {
    name: 'zynySelect',
    props: {
      type: String,
      code: String,
      value: String,
      width: String
    },
    data() {
      return {
        options: [],
        //页面回显的值
        values: '',
        data:{
          //下拉框类型
          type: this.$props.type,
          //查下拉框需要的值
          code: this.$props.code,
        },
        /* 宽度样式 */
        widthStyle:{
          width: this.$props.width
        },
      }
    },
    created() {
      this.initialize();
    },
    methods: {
      initialize() {
        this.values = this.$props.value,
        getOptionsByType(this.data).then(repsone => {
          this.options = repsone.data;
        })
      },
      setOptions() {
        this.$emit('setSelectValue',this.values);
        this.$emit('change',this.values);
      }
    },
  }
</script>

2、常量的定义,用去下拉框类型的区分

//前端常量定义
const DATA_TYPE_DETAIL = "dataTypeDetail";
const PROVINCE_CITY_AREA = "provinceCityArea";
const PROVINCE = "province";
const CITY = "city";
const AREA = "area";
const GARDEN = "garden";
const GREENHOUSE = "greenhouse";
const MANUFACTURER = "manufacturer";
const RETAILER = "retailer";
const COLLECTION_POINT = "collectionPoint";
const PLANTS = 'plants';
const PLANTING_SEASON = "plantingSeason";

export default {
  DATA_TYPE_DETAIL,
  PROVINCE_CITY_AREA,
  PROVINCE,
  CITY,
  AREA,
  GARDEN,
  GREENHOUSE,
  MANUFACTURER,
  RETAILER,
  COLLECTION_POINT,
  PLANTS,
  PLANTING_SEASON
};

二、引用

1、在页面上引入组件

              <zyny-select
                  :type="this.constants.COLLECTION_POINT"
                  :code="form.yqID"
                  :width="'100%'"
                  :value="form.greenHouseId"
                  @setSelectValue="form.greenHouseId=$event"
                  @change="onChange"
                  :key="timer" />

• ：type  下拉框的类型，用于区分组件查询后台调哪个接口
• ：code   调用接口传的值， 如 大棚的下拉框：根据园区ID查询大棚下拉框，这个code传的就是园区ID
• ：width   下拉框在页面上的显示宽度，  注意 “‘100%’”  双引号里还有个单引号
• ：value   下拉框回显的值，  如  大棚下拉框：跳转编辑页时，页面要回显大棚下拉框，这个值就是你跳转编辑页时从后台传入的大棚ID
• @setSelectValue 与 $event， 将下拉框选中的值赋到当前表单， $event 就是 点击下拉框选中的大棚ID
• @change  点击事件， 引号里面是自己定义的方法， 点击下拉框会触发自己定义的方法，目前组件之间的联动需要在自己定义的方法进行，待优化
• ：key  理论上来说是组件的唯一标识。这地方我用的时间戳。定义一个容器“timer”，当需要这个组件重新渲染或者是需要重新加载新内容时，给这个key一个新值即可

  this.timer = new Date().getTime();

  比如：园区与大棚的联动：当选择园区后，大棚的下拉框要相应的刷新成当前园区下的大棚，这时可以在园区的点击事件（@change点击方法）中，给this.timer一个新值，大棚的下拉框将会自动的重新加载出新的下拉列表。

       这里理论上来说可以通过监听的方式实现，但是我不会，这里待优化。

三、后端部分

1、后端常量定义，内容与前端常量对应起来

/**
*   下拉框类型常量定义
*/
public class OptionsConstant {
    public static final String DATA_TYPE_DETAIL = "dataTypeDetail";
    public static final String PROVINCE_CITY_AREA = "provinceCityArea";
    public static final String PROVINCE = "province";
    public static final String CITY = "city";
    public static final String AREA = "area";
    public static final String GARDEN = "garden";
    public static final String GREENHOUSE = "greenhouse";
    public static final String MANUFACTURER = "manufacturer";
    public static final String RETAILER = "retailer";
    public static final String COLLECTION_POINT = "collectionPoint";
    public static final String PLANTS = "plants";
    public static final String PLANTING_SEASON = "plantingSeason";
}

2、业务层

switch(type) {
    case OptionsConstant.PROVINCE:
        dataList = collectionMapper.selectProvinceList();
        break;
    case OptionsConstant.CITY:
        dataList = collectionMapper.selectCityList(code);
        break;
    case OptionsConstant.AREA:
        dataList = collectionMapper.selectAreaList(code);
        break;

业务层会根据前端传入后台的type进行判断查的是哪个下拉框，code就是查下拉框时传的值。

3、持久层，SQL部分

    <!--根据园区ID获取大棚列表  -->
    <select id="select" parameterType="java.lang.String" resultType="java.util.HashMap">
        select
            大棚名称 label,
            大棚ID value
        from 大棚
        where
            园区ID = #{code}
    </select>

下拉框查询的SQL，名称要起别名lable， ID要起别名value

当遇到新的下拉框时，只需要在前后端的常量类里新增type标识，然后SQL写出。并把标识和SQL写入到业务层即可。