@weitutech/by-components 1.1.2 → 1.1.4

package/src/components/form/form.vue

@@ -1,417 +0,0 @@
-<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="："
-      @submit.native.prevent="submit"
-      @reset.native.prevent="reset"
-    >
-      <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)"
-                  @range-change="handleRangeChange($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>
-              <!-- 重置、搜索 按钮 -->
-              <template v-else-if="item.type === 'formButtons'">
-                <el-button
-                  v-if="!item.otherOptions || item.otherOptions.reset !== false"
-                  native-type="reset"
-                  :size="elSize || 'mini'"
-                  v-bind="item.otherOptions ?? {}"
-                >
-                  {{ (item.otherOptions || {}).resetText || '重置' }}
-                </el-button>
-                <el-button
-                  v-if="!item.otherOptions || item.otherOptions.submit !== false"
-                  native-type="submit"
-                  :size="elSize || 'mini'"
-                  type="primary"
-                  :icon="!item.otherOptions || item.otherOptions.showSubmitIcon !== false ? 'el-icon-search' : ''"
-                  v-bind="item.otherOptions ?? {}"
-                >
-                  {{ (item.otherOptions || {}).submitText || '搜索' }}
-                </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,
-      // 存储初始值
-      initialValues: { ...this.value }
-    }
-  },
-
-  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)
-    },
-    handleRangeChange({ startTime, endTime }, item) {
-      if (!item.startTimeField || !item.endTimeField) return
-
-      if (this.replacementData) {
-        this.replacementData[item.startTimeField] = startTime
-        this.replacementData[item.endTimeField] = endTime
-      } else {
-        this.replacementData = {
-          ...this.value,
-          [item.startTimeField]: startTime,
-          [item.endTimeField]: endTime
-        }
-      }
-
-      this.$emit('input', this.replacementData)
-    },
-    handleQueryClick() {
-      this.$emit('queryBtnClick')
-    },
-
-    // 表单提交
-    submit() {
-      this.$refs.formRef.validate(valid => {
-        if (valid) {
-          this.$emit('submit', this.formData)
-        } else {
-          return false
-        }
-      })
-    },
-    // 重置
-    reset() {
-      // 重置为初始值
-      this.$refs.formRef.resetFields()
-      this.$emit('input', { ...this.initialValues })
-      this.$emit('reset')
-    }
-  }
-}
-</script>

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

@@ -1,122 +0,0 @@
-<template>
-  <div class="b-page-search">
-    <by-form
-      :value="formData"
-      v-bind="searchFormConfig"
-      :is-flexible="unfold"
-      @input="handleInput"
-      @change="handleChange"
-      @queryBtnClick="handleQueryClick"
-      @submit="submit"
-      @reset="reset"
-    >
-      <template #header>
-        <slot name="header"></slot>
-      </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"></slot>
-      </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)
-    },
-
-    submit() {
-      this.$emit('submit', this.formData)
-    },
-    reset() {
-      this.$emit('reset')
-    }
-  }
-}
-</script>

package/src/components/pager/index.vue

@@ -1,87 +0,0 @@
-<template>
-  <div
-    id="pager"
-    class="pager fixed bottom-0 right-0 w-full flex justify-center items-center z-50"
-  >
-    <el-pagination
-      :current-page="pager['page']"
-      :page-size="pager['limit']"
-      :page-sizes="pageSizes"
-      background
-      layout="total, prev, pager, next,sizes, jumper"
-      :total="totalCount"
-      @size-change="value => handleValueChange(value, 'limit')"
-      @current-change="value => handleValueChange(value, 'page')"
-    />
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'BYPager',
-  props: {
-    limit: {
-      type: Number,
-      default: 15
-    },
-    page: {
-      type: Number,
-      default: 1
-    },
-    totalCount: {
-      type: Number,
-      required: true,
-      default: 25
-    },
-    pageSizes: {
-      type: Array,
-      default: () => [10, 15, 20, 25, 30, 50, 100]
-    }
-  },
-
-  data() {
-    return {
-      pager: {
-        page: this.page,
-        limit: this.limit
-      }
-    }
-  },
-
-  watch: {
-    page: {
-      handler: function (val, oldVal) {
-        this.pager.page = val
-      },
-      immediate: true
-    },
-    limit: {
-      handler: function (val, oldVal) {
-        this.pager.limit = val
-      },
-      immediate: true
-    }
-  },
-  mounted() {
-    // 修改分页文案
-    document.getElementsByClassName(
-      'el-pagination__jump'
-    )[0].childNodes[0].nodeValue = '跳至'
-    document.getElementsByClassName(
-      'el-pagination__jump'
-    )[0].childNodes[2].nodeValue = ''
-  },
-
-  methods: {
-    handleValueChange(value, field) {
-      if (!value) return
-      const values = {
-        ...this.pager,
-        [field]: value,
-        page: field === 'limit' ? 1 : value
-      }
-      this.$emit('onChange', values)
-    }
-  }
-}
-</script>