@weitutech/by-components 1.0.27 → 1.0.30

package/src/components/form/form.vue

@@ -1,352 +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")
-    }
-  }
-}
+<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>