first commit

src/components/Filter/index.vue

@@ -0,0 +1,165 @@
+<template>
+  <div class="filter">
+    <el-form :class="theme" :inline="true" :model="model">
+      <el-form-item
+        v-for="(item, index) in filterItems"
+        :key="index"
+        :label="item.label">
+
+        <el-input
+          v-if="item.type === 'input'"
+          v-model="model[item.prop]"
+          :placeholder="item.placeholder ? item.placeholder : '请输入'"
+          :clearable="item.clearable !== false"
+          style="width: 110px">
+        </el-input>
+        <el-select
+          v-if="item.type === 'select'"
+          v-model="model[item.prop]"
+          :clearable="item.clearable !== false"
+          :filterable="item.filterable || false"
+          :placeholder="item.placeholder ? item.placeholder : '请选择'"
+          :multiple="item.multiple || false"
+          :collapse-tags="item.collapseTags || false"
+          :collapse-tags-tooltip="item.collapseTagsTooltip || false"
+          @change="(val) => handle(item.event,val)"
+          style="width: 90px"
+          poper-class="filter-select"
+          :empty-values="item.emptyValues || [ '', undefined]"
+          :value-on-clear="item.valueOnClear || ''">
+          <el-checkbox v-if="item.checkbox || false" v-model="checked" @change='(val)=>selectAll(val,item)'>全选</el-checkbox>
+          <el-option
+            v-for="(opt, index) in item.options"
+            :key="index"
+            :label="opt.label"
+            :value="opt.value">
+          </el-option>
+        </el-select>
+
+        <template v-if="item.type === 'datetimerange' && model.time && model.time.length >= 2">
+          <el-date-picker
+            v-model="model[item.prop][0]"
+            type="datetime"
+            :placeholder="item.placeholder ? item.placeholder : '请选择时间'"
+            value-format="YYYY-MM-DD HH:mm:ss"
+            :clearable="item.clearable !== false"
+            style="width: 180px">
+          </el-date-picker>
+          <span class="range"></span>
+          <el-date-picker
+            v-model="model[item.prop][1]"
+            type="datetime"
+            :placeholder="item.placeholder ? item.placeholder : '请选择时间'"
+            value-format="YYYY-MM-DD HH:mm:ss"
+            :clearable="item.clearable !== false"
+            style="width: 180px">
+          </el-date-picker>
+        </template>
+      </el-form-item>
+    </el-form>
+    <div class="buttons">
+      <template v-for="(item, index) in filterButtons" :key="index">
+        <el-button
+          v-if="item.type === 'button'"
+          :type="item.theme"
+          @click="handle(item.prop)">{{ item.name }}
+        </el-button>
+      </template>
+    </div>
+  </div>
+</template>
+<script setup>
+import { ref, onMounted } from 'vue'
+const emit = defineEmits([ 'handle', 'change', 'remote', 'changeDate' ])
+
+const props = defineProps({
+  'filter-buttons': {
+    type: Array,
+    required: false,
+    default: () => {
+      return []
+    }
+  },
+  'filter-items': {
+    type: Array,
+    required: false,
+    default: () => {
+      return []
+    }
+  },
+  'filter-model': {
+    type: Object,
+    required: false,
+    default: () => {
+      return {}
+    }
+  },
+  theme: {
+    type: String,
+    required: false,
+    default: 'Form'
+  },
+  disabledDate: {
+    type: Function,
+    required: false
+  },
+  calendarChange: {
+    type: Function,
+    required: false
+  }
+})
+
+const model = ref({})
+const checked = ref(false)
+
+// 多选下拉框 全选操作
+const selectAll = (val, item) => {
+    model.value[item.prop] = []
+    if (checked.value) {
+      model.value[item.prop] = item.options.map(i => i.value)
+    } else {
+      model.value[item.prop] = []
+    }
+  }
+  // 修改多选下拉框全选选中状态
+const changeChecked = (flag) => {
+  checked.value = flag
+}
+
+/**
+ * 点击操作按钮
+ * @param type 操作类型
+ */
+const handle = (type) => {
+  emit('handle', type, model.value)
+}
+
+/**
+ * 重置表单数据
+ */
+const reset = () => {
+  model.value = { ...props.filterModel }
+}
+
+onMounted(() => {
+  reset()
+})
+
+defineExpose({
+  reset,
+  changeChecked,
+  model: model
+})
+</script>
+
+<style lang="scss" scoped>
+.filter{
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  .el-form{
+    width: 1060px;
+    text-align: left;
+  }
+}
+</style>