iot-front-ui/src/components/common/query.vue

<template>
  <div class="ioc-query-form">
    <a-form layout="inline" :form="formData">
      <a-form-item label="单位名称：" class="formItem" v-if="visible.company">
        <a-select default-value="0" style="width: 200px" v-model="formData.company">
          <a-select-option value="0"> 全部 </a-select-option>
          <a-select-option v-for="item in companyData" :key="item.value" :value="item.value"> {{ item.label }} </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="部门名称：" class="formItem" v-if="visible.dept">
        <a-select default-value="0" style="width: 200px" v-model="formData.dept">
          <a-select-option value="0"> 全部 </a-select-option>
          <a-select-option v-for="item in deptData" :key="item.value" :value="item.value"> {{ item.label }} </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="楼层：" class="formItem" v-if="visible.floor">
        <a-select default-value="0" style="width: 120px" v-model="formData.floor">
          <a-select-option value="0"> 全部 </a-select-option>
          <a-select-option v-for="item in floorData" :key="item.value" :value="item.value"> {{ item.label }} </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="能源类型：" class="formItem" v-if="visible.energy">
        <a-select default-value="0" style="width: 200px" v-model="formData.energy">
          <a-select-option value="0"> 全部 </a-select-option>
          <a-select-option v-for="item in energyData" :key="item.value" :value="item.value"> {{ item.label }} </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="时间范围：" class="formItem" v-if="visible.time">
        <timeRange :time-range.sync="formData.timeRange" ref="timeRange" style="width: 250px"></timeRange>
      </a-form-item>
      <slot name="extraItem"></slot>
      <a-form-item class="formItem" style="float: right;margin-right: 3%">
        <a-space size="middle">
          <a-button type="primary" size="small" style="width: 70px;background-color: #B3B3B3;border: none;" @click="formReset">重置</a-button>
          <a-button type="primary" size="small" style="width: 70px;" @click="search(formData)">查询</a-button>
        </a-space>
      </a-form-item>
    </a-form>
  </div>
</template>

<script>
import timeRange from "@/components/common/timeRange.vue";
export default {
  components: {
    timeRange,
  },
  props: {
    queryData: Object,
    show: Array,
    reset: Function,
    search: Function,
  },
  emits: ['update:queryData'],
  setup(props, context) {
    const methods = {
      updateFormData(obj) {
        context.emit('update:queryData', obj)
      }
    }
    return methods
  },
  watch: {
    formData: {
      handler: function (val) {
        this.updateFormData(val)
      },
      deep: true,
    }
  },
  data() {
    return {
      oriQueryData: {},
      visible: {
        company: false,
        floor: false,
        dept: false,
        energy: false,
        time: false
      },
      formData: {},
      // 单位数据
      companyData: [
        {
          label: '中讯邮电咨询设计院',
          value: '1'
        },
        {
          label: '北京电信规划院',
          value: '2'
        },
        {
          label: '上分',
          value: '3'
        }
      ],
      // 楼层数据
      floorData: [
        {
          label: '1F',
          value: '1'
        },{
          label: '2F',
          value: '2'
        },{
          label: '3F',
          value: '3'
        },{
          label: '4F',
          value: '4'
        },{
          label: '5F',
          value: '5'
        }
      ],
      // 部门数据
      deptData: [
        {
          label: '市场部',
          value: '1'
        },
        {
          label: '研发部',
          value: '2'
        }
      ],
      // 能源类型
      energyData: [
        {
          label: '用电',
          value: 'electric'
        },
        {
          label: '用水',
          value: 'water'
        },
        {
          label: '用热',
          value: 'hot'
        },
        {
          label: '用冷',
          value: 'cold'
        },
        {
          label: '光伏',
          value: 'pv'
        }
      ]
    };
  },
  created() {
    if (this.show) {
      for (let i = 0; i < this.show.length; i++) {
        this.visible[this.show[i]] = true
      }
    }
  },
  mounted() {
    if (this.queryData) {
      this.formData = JSON.parse(JSON.stringify(this.queryData))
      this.oriQueryData = JSON.parse(JSON.stringify(this.queryData));
    }
  },
  methods: {
    formReset() {
      this.formData = JSON.parse(JSON.stringify(this.oriQueryData));
      this.search();
    }
  }
};
</script>

<style lang="less" scoped>
.formItem {
  margin: 0px 15px;
}
</style>