@weitutech/by-components 1.0.27

package/src/components/form/comps/pair-number-input.vue

@@ -0,0 +1,67 @@
+<template>
+  <div class="w-full flex">
+    <el-input class="w-1/2" :value="value[0]" :placeholder="earliestPlaceholder" @input="(value) => handleInput(value, 'min')" @blur="(e) => handleBlur(+e.target.value, 'min')" />
+    <span>~</span>
+    <el-input class="w-1/2" :value="value[1]" :placeholder="latestPlaceholder" @input="(value) => handleInput(value, 'max')" @blur="(e) => handleBlur(+e.target.value, 'max')" />
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    value: {
+      type: Array,
+      required: true,
+      default: () => ["", 0]
+    },
+    earliestPlaceholder: {
+      type: String,
+      default: ""
+    },
+    latestPlaceholder: {
+      type: String,
+      default: ""
+    }
+  },
+
+  methods: {
+    /**
+     * 输入框输入回调，将其转换为数字，并反馈到父组件
+     * @param { string } val 输入框的value值
+     * @param { string } type 输入框的类型 min | max
+     */
+    handleInput(val, type) {
+      if (type === "min") {
+        const values = [val.replace(/\D+/, ""), this.value[1]]
+
+        this.$emit("input", values)
+      } else if (type === "max") {
+        const values = [this.value[0], val.replace(/\D+/, "")]
+
+        this.$emit("input", values)
+      }
+    },
+
+    /**
+     * 输入框失去焦点回调，判断最小输入框是否大于最大输入框和最大输入框小于最小输入框，并反馈到父组件
+     * @param { number } val 输入框的value值
+     * @param { string } type 输入框的类型 min | max
+     */
+    handleBlur(val, type) {
+      if (type === "min") {
+        if (val > this.value[1]) {
+          const values = [this.value[1], this.value[1]]
+
+          this.$emit("input", values)
+        }
+      } else if (type === "max") {
+        if (val < this.value[0]) {
+          const values = [this.value[0], this.value[0]]
+
+          this.$emit("input", values)
+        }
+      }
+    }
+  }
+}
+</script>

package/src/components/form/comps/select.vue

@@ -0,0 +1,127 @@
+<template>
+  <el-select
+    v-bind="$props"
+    :value="value"
+    ref="selection"
+    :placeholder="config.placeholder || '请选择'"
+    @change="change"
+    @visible-change="visibleChange"
+    @remove-tag="removeTag"
+    @clear="clear"
+    @blur="blur"
+    @focus="focus"
+  >
+    <template v-if="config.mode === 'group'">
+      <el-option-group
+        v-for="group in item.options"
+        :key="group[config.optionValue || 'value']"
+        :label="group[config.optionLabel || 'label']"
+      >
+        <el-option
+          v-for="gItem in group.options"
+          :key="gItem[config.optionValue || 'value']"
+          :label="gItem[config.optionLabel || 'label']"
+          :value="gItem[config.optionValue || 'value']"
+        />
+      </el-option-group>
+    </template>
+    <template v-else>
+      <el-option
+        v-for="(item) in filterData"
+        :key="item[config.optionValue || 'value'] +'-' +item[config.optionLabel || 'label']"
+        :label="item[config.optionLabel || 'label']"
+        :value="item[config.optionValue || 'value']"
+      />
+      </template>
+  </el-select>
+</template>
+<script>
+import { Select } from 'element-ui'
+export default {
+  name: 'BYSelect',
+  props: {
+    ...Select.props,
+    value: {
+      type: [String, Number, Array],
+    },
+    // 下拉框数据
+    placeholder: {
+      type: String,
+      default: '请选择'
+    },
+    // 下拉框数据
+    options: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+    //当前配置
+    config: {
+      type: Object,
+      default: null
+    }
+  },
+  data() {
+    return {
+      searchVal: '',
+      filterData: []
+    }
+  },
+  watch: {
+    options: {
+      handler() {
+        this.filterData = this.options
+      },
+      deep: true,
+      immediate: true
+    }
+  },
+  methods: {
+    change(e) {
+      this.$emit('change', arguments.length === 1 ? e : arguments)
+      this.$emit("input", e)
+    },
+    input(e) {
+      this.$emit('change', arguments.length === 1 ? e : arguments)
+      this.$emit("input", e)
+    },
+    visibleChange(e) {
+      this.$emit('visible-change', arguments.length === 1 ? e : arguments)
+    },
+    removeTag(e) {
+      this.$emit('remove-tag', arguments.length === 1 ? e : arguments)
+    },
+    clear(e) {
+      this.$emit('clear', arguments.length === 1 ? e : arguments)
+    },
+    blur(e) {
+      this.$emit('blur', arguments.length === 1 ? e : arguments)
+    },
+    focus(e) {
+      // 如果是多选模式 则做处理
+      if (this.multiple) {
+        this.searchNoReset()
+      }
+      this.$emit('blur', arguments.length === 1 ? e : arguments)
+    },
+    // 解决多选时选择后下拉数据会重置问题
+    searchNoReset() {
+      // 离开时重置数据
+      this.$refs.selection.$refs.input.blur = () => {
+        this.filterData = this.options
+      }
+
+      //   根据数据筛选数据
+      this.$refs.selection.$refs.input.onkeyup = () => {
+        this.filterData = this.options
+        this.searchVal = this.$refs.selection.$refs.input.value
+        this.filterData = this.options.filter(
+          (item) => item[this.config.optionLabel].indexOf(this.searchVal) !== -1
+        )
+      }
+    }
+  }
+}
+</script>
+

package/src/components/form/form.vue

@@ -0,0 +1,352 @@
+<template>
+  <div class="b-form">
+    <div class="header">
+      <slot name="header" />
+    </div>
+    <el-form
+      ref="formRef"
+      class="myForm"
+      :label-position="labelPosition"
+      :rules="rules"
+      :label-width="labelWidth"
+      :inline="inline"
+      :model="value"
+      label-suffix="："
+    >
+      <el-row>
+        <template v-for="item in formItems">
+          <el-col
+            v-if="!item.isHidden"
+            v-show="showFold(item)"
+            :key="item.label"
+            v-bind="item.colLayout || colLayout"
+          >
+            <el-form-item
+              :label="item.label || ''"
+              :rules="item.rules"
+              :style="item.itemStyle || itemStyle"
+              :prop="item.field"
+              :label-width="item.labelWidth || labelWidth"
+            >
+              <!-- 输入框 -->
+              <template v-if="item.type === 'input' || item.type === 'password'">
+                <el-input
+                  :placeholder="item.placeholder"
+                  clearable
+                  v-bind="item.otherOptions"
+                  style="width: 100%"
+                  :show-password="item.type === 'password'"
+                  :value="value[`${item.field}`]"
+                  :size="elSize"
+                  @input="handleValueChange($event, item)"
+                >
+                  <slot v-if="item.otherOptions && item.otherOptions.isPrefix" name="prefix">
+                    <el-select
+                      v-if="item.otherOptions.prefixType === 'select'"
+                      slot="prepend"
+                      :value="value[`${item.otherOptions.prefixField}`]"
+                      placeholder="请选择"
+                      :style="{
+                        width: '100px'
+                      }"
+                      @input="handleValueChange($event, item.otherOptions)"
+                    >
+                      <el-option v-for="p in item.otherOptions.prefixOption" :key="p.value" :label="p.label" :value="p.value" />
+                    </el-select>
+                  </slot>
+                  <slot name="suffix" />
+                  <slot name="prepend" />
+                  <slot name="append" />
+                </el-input>
+              </template>
+              <!-- 选择器 -->
+              <template v-else-if="item.type === 'select'">
+                <by-select
+                  :value="value[`${item.field}`]"
+                  :config="item"
+                  v-bind="item.otherOptions"
+                  style="width: 100%"
+                  clearable
+                  filterable
+                  :size="elSize"
+                  :options="item.options"
+                  @input="handleValueChange($event, item)"
+                />
+                <slot :name="item.field" />
+              </template>
+              <!-- 日期选择器 -->
+              <template v-else-if="item.type === 'datepicker'">
+                <el-date-picker
+                  style="width: 100%"
+                  v-bind="item.otherOptions"
+                  :placeholder="item.placeholder"
+                  :value="value[`${item.field}`]"
+                  :size="elSize"
+                  @input="handleValueChange($event, item)"
+                />
+              </template>
+              <!-- 级联 -->
+              <template v-else-if="item.type === 'cascader'">
+                <el-cascader
+                  style="width: 100%"
+                  v-bind="item.otherOptions"
+                  :placeholder="item.placeholder"
+                  :options="item.options"
+                  clearable
+                  filterable
+                  :value="value[`${item.field}`]"
+                  :size="elSize"
+                  @input="handleValueChange($event, item)"
+                />
+              </template>
+              <!-- 开关 -->
+              <template v-else-if="item.type === 'switch'">
+                <el-switch
+                  v-bind="item.otherOptions"
+                  :value="value[`${item.field}`]"
+                  :size="elSize"
+                  @input="handleValueChange($event, item)"
+                />
+              </template>
+              <!-- 单选框 -->
+              <template v-else-if="item.type === 'radioGroup'">
+                <el-radio-group
+                  v-if="item.cGOptions.type === 'button'"
+                  v-bind="item.otherOptions"
+                  :value="value[`${item.field}`]"
+                  :size="elSize"
+                  @input="handleValueChange($event, item)"
+                >
+                  <el-radio-button
+                    v-for="cgb in item.cGOptions.options"
+                    :key="cgb.value"
+                    :label="cgb.value"
+                    :disabled="!!cgb.disabled"
+                  >
+                    {{ cgb.label }}
+                  </el-radio-button>
+                </el-radio-group>
+                <el-radio-group
+                  v-if="item.cGOptions.type === 'checkbox'"
+                  v-bind="item.otherOptions"
+                  :value="value[`${item.field}`]"
+                  :size="elSize"
+                  @input="handleValueChange($event, item)"
+                >
+                  <el-radio v-for="cg in item.cGOptions.options" :key="cg.value" :label="cg.value" :disabled="!!cg.disabled">
+                    {{ cg.label }}
+                  </el-radio>
+                </el-radio-group>
+              </template>
+              <!-- 多选框 -->
+              <template v-else-if="item.type === 'checkboxGroup'">
+                <el-checkbox-group
+                  v-if="item.cGOptions.type === 'button'"
+                  v-bind="item.otherOptions"
+                  :value="value[`${item.field}`]"
+                  :size="elSize"
+                  @input="handleValueChange($event, item)"
+                >
+                  <el-checkbox-button
+                    v-for="cgb in item.cGOptions.options"
+                    :key="cgb.value"
+                    :label="cgb.value"
+                  >
+                    {{ cgb.label }}
+                  </el-checkbox-button>
+                </el-checkbox-group>
+                <el-checkbox-group
+                  v-if="item.cGOptions.type === 'checkbox'"
+                  v-bind="item.otherOptions"
+                  :value="value[`${item.field}`]"
+                  :size="elSize"
+                  @input="handleValueChange($event, item)"
+                >
+                  <el-checkbox
+                    v-for="cg in item.cGOptions.options"
+                    :key="cg.value"
+                    :label="cg.value"
+                  >
+                    {{ cg.label }}
+                  </el-checkbox>
+                </el-checkbox-group>
+              </template>
+              <!-- 文本类型 -->
+              <template v-else-if="item.type === 'text'">
+                <slot :name="item.slotName">
+                  <div>{{ `${item.defaultValue}` }}</div>
+                </slot>
+              </template>
+              <!-- 双数字输入框 -->
+              <template v-else-if="item.type === 'pairNumberInput'">
+                <PairNumberInput
+                  :value="value[`${item.field}`]"
+                  :earliest-placeholder="item.earliestPlaceholder"
+                  :latest-placeholder="item.latestPlaceholder"
+                  @input="handleValueChange($event, item)"
+                />
+              </template>
+              <!-- 时间范围自定义选择器 -->
+              <template v-else-if="item.type === 'customDatePicker'">
+                <CustomDatePicker
+                  :value="value[`${item.field}`]"
+                  v-bind="item"
+                  @input="handleValueChange($event, item)"
+                />
+              </template>
+              <!-- 自定义 -->
+              <template v-else-if="item.type === 'custom'">
+                <slot :name="item.field" :row="item" />
+              </template>
+              <!-- 搜索按钮 -->
+              <template v-else-if="item.type === 'search'">
+                <el-button :size="elSize || 'mini'" type="primary" icon="el-icon-search" v-bind="item.otherOptions" @click="handleQueryClick">{{ (item.otherOptions || {}).text || "搜索" }}</el-button>
+              </template>
+            </el-form-item>
+          </el-col>
+        </template>
+        <slot name="btn" :formData="formData" />
+      </el-row>
+    </el-form>
+    <div class="footer">
+      <slot name="footer" />
+    </div>
+  </div>
+</template>
+
+<script>
+import PairNumberInput from "./comps/pair-number-input.vue"
+import CustomDatePicker from "./comps/custom-date-picker.vue"
+
+export default {
+  name: "ByForm",
+  components: {
+    PairNumberInput,
+    CustomDatePicker,
+  },
+
+  props: {
+    value: {
+      type: Object,
+      required: true
+    },
+    labelPosition: {
+      type: String,
+      default: "right"
+    },
+    formItems: {
+      type: Array,
+      default: () => []
+    },
+    flexible: {
+      type: Object,
+      default: () => {
+        return {
+          foldField: "none", // 需要折叠字段
+          unfold: false // 默认展开？
+        }
+      }
+    },
+    labelWidth: {
+      type: String,
+      default: "100px"
+    },
+    itemStyle: {
+      type: Object,
+      default: () => ({ padding: "10px 40px" })
+    },
+    colLayout: {
+      type: Object,
+      default: () => ({
+        xl: 4, // >1920px 4个
+        lg: 6,
+        md: 6,
+        sm: 8,
+        xs: 12
+      })
+    },
+    // 是否收起
+    isFlexible: {
+      type: Boolean,
+      default: true
+    },
+    inline: {
+      type: Boolean,
+      default: false
+    },
+    rules: {
+      type: Object,
+      default: () => {}
+    },
+    elSize: {
+      type: String,
+      default: "mini"
+    }
+  },
+
+  data() {
+    return {
+      formData: this.value,
+      // 数据替换
+      replacementData: undefined
+    }
+  },
+
+  computed: {
+    showFold() {
+      return (item) => {
+        if (this.isFlexible) {
+          return true
+        } else {
+          if (this.flexible && this.flexible.foldField.length) {
+            if (this.flexible.foldField.includes(item.id) || this.flexible.foldField.includes(item.field)) {
+              return false
+            } else {
+              return true
+            }
+          } else {
+            return true
+          }
+        }
+      }
+    }
+  },
+
+  watch: {
+    value: {
+      handler(newValue, oldValue) {
+        this.formData = newValue
+        this.replacementData = {
+          ...(this.replacementData ? this.replacementData : {}),
+          ...newValue
+        }
+      },
+      deep: true,
+      immediate: true
+    }
+  },
+
+  methods: {
+    validate(cb = () => {}) {
+      this.$refs.formRef.validate((valid, obj) => {
+        cb(valid, obj)
+      })
+    },
+    clearValidate() {
+      this.$refs.formRef.clearValidate()
+    },
+    handleValueChange(value, item) {
+      if (this.replacementData) {
+        this.replacementData[item.field] = value
+      } else {
+        this.replacementData = { ...this.value, [item.field]: value }
+      }
+      this.$emit("change", { ...item, value })
+      this.$emit("input", this.replacementData)
+    },
+    handleQueryClick() {
+      this.$emit("queryBtnClick")
+    }
+  }
+}
+</script>

package/src/components/page-search/page-search.vue

@@ -0,0 +1,114 @@
+<template>
+  <div class="b-page-search">
+    <by-form
+      :value="formData"
+      v-bind="searchFormConfig"
+      :is-flexible="unfold"
+      @input="handleInput"
+      @change="handleChange"
+      @queryBtnClick="handleQueryClick"
+    >
+      <template #header>
+        <slot name="header" />
+      </template>
+      <template #footer>
+        <div v-if="isShowUnfoldBtn" class="fold">
+          <by-fold-search @change="handleFlexible" />
+        </div>
+      </template>
+      <template v-for="item in getCustomItem" #[item]>
+        <slot :name="item" />
+      </template>
+    </by-form>
+  </div>
+</template>
+
+<script>
+
+export default {
+  props: {
+    searchFormConfig: {
+      type: Object,
+      required: true,
+      default: () => {}
+    },
+    value: {
+      type: Object,
+      default: () => {}
+    }
+  },
+
+  data() {
+    return {
+      formItems: this.searchFormConfig?.formItems ?? [],
+      formOriginData: {}, // 最初的初始化数据
+      formData: {}, // 双向绑定的
+      unfold: false // 是否展开
+    }
+  },
+
+  computed: {
+    isShowUnfoldBtn() {
+      const formItems = this.searchFormConfig?.formItems ?? []
+      const flexible = this.searchFormConfig?.flexible ?? undefined
+      // 如果没有配置flexible, 则默认为true
+      if (flexible) {
+        if (formItems.length > flexible.foldField.length) {
+          return true
+        } else {
+          return false
+        }
+      } else {
+        return false
+      }
+    },
+    // 所有需要自定义的插槽
+    getCustomItem() {
+      return this.formItems.filter(f => f.type === "custom").map(item => item.field)
+    }
+  },
+
+  watch: {
+    value: {
+      handler(newValue, oldValue) {
+        this.formData = newValue
+      },
+      deep: true,
+      immediate: true
+    }
+  },
+
+  mounted() {
+    this.formOriginData = this.value
+    this.unfold = this.searchFormConfig.flexible?.unfold ?? false
+  },
+
+  // 双向绑定的属性应该是由配置文件的field来决定
+  // 1.优化一: formData中的属性应该动态来决定
+  methods: {
+    // 2.优化二: 当用户点击重置
+    handleResetClick() {
+      this.formData = { ...this.formOriginData }
+      this.$emit("input", { ...this.formOriginData })
+      this.$emit("resetBtnClick")
+    },
+
+    // 3.优化三: 当用户点击搜索
+    handleQueryClick() {
+      this.$emit("queryBtnClick")
+    },
+
+    // 4.优化四: 当用户点击展开
+    handleFlexible() {
+      this.unfold = !this.unfold
+    },
+    handleInput(value) {
+      this.formData = value
+      this.$emit("input", { ...this.formData })
+    },
+    handleChange(event) {
+      this.$emit("change", event)
+    }
+  }
+}
+</script>