@weitutech/by-components 1.0.31 → 1.1.0

package/src/components/form/comps/date-picker-range.vue

@@ -7,7 +7,7 @@
       :end-placeholder="config.endPlaceholder || '结束时间'"
       :range-separator="config.rangeSeparator || '-'"
       :size="config.size || 'mini'"
-      type= "daterange"
+      type="daterange"
       @input="handleChange"
     />
     <div class="btn">
@@ -25,11 +25,11 @@
 </template>
 
 <script>
-import moment from "moment"
+import moment from 'moment'
 export default {
   name: 'ByDatePickerRange',
   props: {
-     //绑定的表单数据
+    //绑定的表单数据
     value: {
       type: Object,
       default: null
@@ -43,13 +43,44 @@ export default {
   data() {
     return {
       shortcuts: [
-        { label: "上月", start_time: moment().subtract(1, "months").startOf("month").format("YYYY-MM-DD"), end_time: moment().subtract(1, "months").endOf("month").format("YYYY-MM-DD"), key: "last_month" },
-        { label: "昨天", start_time: moment().subtract(1, "days").format("YYYY-MM-DD"), end_time: moment().subtract(1, "days").format("YYYY-MM-DD"), key: "yesterday" },
-        { label: "今天", start_time: moment().startOf("day").format("YYYY-MM-DD"), end_time: moment().startOf("day").format("YYYY-MM-DD"), key: "today" },
-        { label: "本周", start_time: moment().startOf("week").format("YYYY-MM-DD"), end_time: moment().endOf("week").format("YYYY-MM-DD"), key: "week" },
-        { label: "本月", start_time: moment().startOf("month").format("YYYY-MM-DD"), end_time: moment().endOf("month").format("YYYY-MM-DD"), key: "month" }
+        {
+          label: '上月',
+          start_time: moment()
+            .subtract(1, 'months')
+            .startOf('month')
+            .format('YYYY-MM-DD'),
+          end_time: moment()
+            .subtract(1, 'months')
+            .endOf('month')
+            .format('YYYY-MM-DD'),
+          key: 'last_month'
+        },
+        {
+          label: '昨天',
+          start_time: moment().subtract(1, 'days').format('YYYY-MM-DD'),
+          end_time: moment().subtract(1, 'days').format('YYYY-MM-DD'),
+          key: 'yesterday'
+        },
+        {
+          label: '今天',
+          start_time: moment().startOf('day').format('YYYY-MM-DD'),
+          end_time: moment().startOf('day').format('YYYY-MM-DD'),
+          key: 'today'
+        },
+        {
+          label: '本周',
+          start_time: moment().startOf('week').format('YYYY-MM-DD'),
+          end_time: moment().endOf('week').format('YYYY-MM-DD'),
+          key: 'week'
+        },
+        {
+          label: '本月',
+          start_time: moment().startOf('month').format('YYYY-MM-DD'),
+          end_time: moment().endOf('month').format('YYYY-MM-DD'),
+          key: 'month'
+        }
       ],
-      active: ""
+      active: ''
     }
   },
   mounted() {
@@ -62,16 +93,19 @@ export default {
   methods: {
     handleChange(e) {
       if (!e) {
-        this.$emit("input", [])
+        this.$emit('input', [])
       } else {
-        this.$emit("input", e.map(item => moment(item).format("YYYY-MM-DD")))
+        this.$emit(
+          'input',
+          e.map(item => moment(item).format('YYYY-MM-DD'))
+        )
       }
-      this.active = ""
+      this.active = ''
     },
     handleClick(item) {
       this.active = item.key
       this.value[this.config.field] = [item.start_time, item.end_time]
-      this.$emit("input", [item.start_time, item.end_time])
+      this.$emit('input', [item.start_time, item.end_time])
     }
   }
 }

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

@@ -1,8 +1,20 @@
 <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')" />
+    <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')" />
+    <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>
 
@@ -12,15 +24,15 @@ export default {
     value: {
       type: Array,
       required: true,
-      default: () => ["", 0]
+      default: () => ['', 0]
     },
     earliestPlaceholder: {
       type: String,
-      default: ""
+      default: ''
     },
     latestPlaceholder: {
       type: String,
-      default: ""
+      default: ''
     }
   },
 
@@ -31,14 +43,14 @@ export default {
      * @param { string } type 输入框的类型 min | max
      */
     handleInput(val, type) {
-      if (type === "min") {
-        const values = [val.replace(/\D+/, ""), this.value[1]]
+      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)
+      } else if (type === 'max') {
+        const values = [this.value[0], val.replace(/\D+/, '')]
 
-        this.$emit("input", values)
+        this.$emit('input', values)
       }
     },
 
@@ -48,17 +60,17 @@ export default {
      * @param { string } type 输入框的类型 min | max
      */
     handleBlur(val, type) {
-      if (type === "min") {
+      if (type === 'min') {
         if (val > this.value[1]) {
           const values = [this.value[1], this.value[1]]
 
-          this.$emit("input", values)
+          this.$emit('input', values)
         }
-      } else if (type === "max") {
+      } else if (type === 'max') {
         if (val < this.value[0]) {
           const values = [this.value[0], this.value[0]]
 
-          this.$emit("input", values)
+          this.$emit('input', values)
         }
       }
     }

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

@@ -27,12 +27,16 @@
     </template>
     <template v-else>
       <el-option
-        v-for="(item) in filterData"
-        :key="item[config.optionValue || 'value'] +'-' +item[config.optionLabel || 'label']"
+        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>
+    </template>
   </el-select>
 </template>
 <script>
@@ -42,7 +46,7 @@ export default {
   props: {
     ...Select.props,
     value: {
-      type: [String, Number, Array],
+      type: [String, Number, Array]
     },
     // 下拉框数据
     placeholder: {
@@ -80,11 +84,11 @@ export default {
   methods: {
     change(e) {
       this.$emit('change', arguments.length === 1 ? e : arguments)
-      this.$emit("input", e)
+      this.$emit('input', e)
     },
     input(e) {
       this.$emit('change', arguments.length === 1 ? e : arguments)
-      this.$emit("input", e)
+      this.$emit('input', e)
     },
     visibleChange(e) {
       this.$emit('visible-change', arguments.length === 1 ? e : arguments)
@@ -117,11 +121,10 @@ export default {
         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
+          item => item[this.config.optionLabel].indexOf(this.searchVal) !== -1
         )
       }
     }
   }
 }
 </script>
-

package/src/components/form/form.vue

@@ -12,15 +12,12 @@
       :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-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"
@@ -51,7 +48,12 @@
                       }"
                       @input="handleValueChange($event, item.otherOptions)"
                     >
-                      <el-option v-for="p in item.otherOptions.prefixOption" :key="p.value" :label="p.label" :value="p.value" />
+                      <el-option
+                        v-for="p in item.otherOptions.prefixOption"
+                        :key="p.value"
+                        :label="p.label"
+                        :value="p.value"
+                      />
                     </el-select>
                   </slot>
                   <slot name="suffix" />
@@ -133,7 +135,12 @@
                   :size="elSize"
                   @input="handleValueChange($event, item)"
                 >
-                  <el-radio v-for="cg in item.cGOptions.options" :key="cg.value" :label="cg.value" :disabled="!!cg.disabled">
+                  <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>
@@ -147,11 +154,7 @@
                   :size="elSize"
                   @input="handleValueChange($event, item)"
                 >
-                  <el-checkbox-button
-                    v-for="cgb in item.cGOptions.options"
-                    :key="cgb.value"
-                    :label="cgb.value"
-                  >
+                  <el-checkbox-button v-for="cgb in item.cGOptions.options" :key="cgb.value" :label="cgb.value">
                     {{ cgb.label }}
                   </el-checkbox-button>
                 </el-checkbox-group>
@@ -162,11 +165,7 @@
                   :size="elSize"
                   @input="handleValueChange($event, item)"
                 >
-                  <el-checkbox
-                    v-for="cg in item.cGOptions.options"
-                    :key="cg.value"
-                    :label="cg.value"
-                  >
+                  <el-checkbox v-for="cg in item.cGOptions.options" :key="cg.value" :label="cg.value">
                     {{ cg.label }}
                   </el-checkbox>
                 </el-checkbox-group>
@@ -201,7 +200,36 @@
               </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>
+                <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>
@@ -216,14 +244,14 @@
 </template>
 
 <script>
-import PairNumberInput from "./comps/pair-number-input.vue"
-import CustomDatePicker from "./comps/custom-date-picker.vue"
+import PairNumberInput from './comps/pair-number-input.vue'
+import CustomDatePicker from './comps/custom-date-picker.vue'
 
 export default {
-  name: "ByForm",
+  name: 'ByForm',
   components: {
     PairNumberInput,
-    CustomDatePicker,
+    CustomDatePicker
   },
 
   props: {
@@ -233,7 +261,7 @@ export default {
     },
     labelPosition: {
       type: String,
-      default: "right"
+      default: 'right'
     },
     formItems: {
       type: Array,
@@ -243,18 +271,18 @@ export default {
       type: Object,
       default: () => {
         return {
-          foldField: "none", // 需要折叠字段
+          foldField: 'none', // 需要折叠字段
           unfold: false // 默认展开？
         }
       }
     },
     labelWidth: {
       type: String,
-      default: "100px"
+      default: '100px'
     },
     itemStyle: {
       type: Object,
-      default: () => ({ padding: "10px 40px" })
+      default: () => ({ padding: '10px 40px' })
     },
     colLayout: {
       type: Object,
@@ -281,7 +309,7 @@ export default {
     },
     elSize: {
       type: String,
-      default: "mini"
+      default: 'mini'
     }
   },
 
@@ -289,13 +317,15 @@ export default {
     return {
       formData: this.value,
       // 数据替换
-      replacementData: undefined
+      replacementData: undefined,
+      // 存储初始值
+      initialValues: { ...this.value }
     }
   },
 
   computed: {
     showFold() {
-      return (item) => {
+      return item => {
         if (this.isFlexible) {
           return true
         } else {
@@ -342,28 +372,46 @@ export default {
       } else {
         this.replacementData = { ...this.value, [item.field]: value }
       }
-      this.$emit("change", { ...item, value })
-      this.$emit("input", this.replacementData)
+      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.replacementData = {
+          ...this.value,
+          [item.startTimeField]: startTime,
+          [item.endTimeField]: endTime
         }
       }
-      
-      this.$emit("input", this.replacementData)
+
+      this.$emit('input', this.replacementData)
     },
     handleQueryClick() {
-      this.$emit("queryBtnClick")
+      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>
+</script>

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

@@ -7,9 +7,11 @@
       @input="handleInput"
       @change="handleChange"
       @queryBtnClick="handleQueryClick"
+      @submit="submit"
+      @reset="reset"
     >
       <template #header>
-        <slot name="header" />
+        <slot name="header"></slot>
       </template>
       <template #footer>
         <div v-if="isShowUnfoldBtn" class="fold">
@@ -17,14 +19,13 @@
         </div>
       </template>
       <template v-for="item in getCustomItem" #[item]>
-        <slot :name="item" />
+        <slot :name="item"></slot>
       </template>
     </by-form>
   </div>
 </template>
 
 <script>
-
 export default {
   props: {
     searchFormConfig: {
@@ -64,7 +65,7 @@ export default {
     },
     // 所有需要自定义的插槽
     getCustomItem() {
-      return this.formItems.filter(f => f.type === "custom").map(item => item.field)
+      return this.formItems.filter(f => f.type === 'custom').map(item => item.field)
     }
   },
 
@@ -89,13 +90,13 @@ export default {
     // 2.优化二: 当用户点击重置
     handleResetClick() {
       this.formData = { ...this.formOriginData }
-      this.$emit("input", { ...this.formOriginData })
-      this.$emit("resetBtnClick")
+      this.$emit('input', { ...this.formOriginData })
+      this.$emit('resetBtnClick')
     },
 
     // 3.优化三: 当用户点击搜索
     handleQueryClick() {
-      this.$emit("queryBtnClick")
+      this.$emit('queryBtnClick')
     },
 
     // 4.优化四: 当用户点击展开
@@ -104,10 +105,17 @@ export default {
     },
     handleInput(value) {
       this.formData = value
-      this.$emit("input", { ...this.formData })
+      this.$emit('input', { ...this.formData })
     },
     handleChange(event) {
-      this.$emit("change", event)
+      this.$emit('change', event)
+    },
+
+    submit() {
+      this.$emit('submit', this.formData)
+    },
+    reset() {
+      this.$emit('reset')
     }
   }
 }

package/src/components/pager/index.vue

@@ -1,5 +1,8 @@
 <template>
-  <div id="pager" class="pager fixed bottom-0 right-0 w-full flex justify-center items-center z-50">
+  <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']"
@@ -7,8 +10,8 @@
       background
       layout="total, prev, pager, next,sizes, jumper"
       :total="totalCount"
-      @size-change="(value) => handleValueChange(value, 'limit')"
-      @current-change="(value) => handleValueChange(value, 'page')"
+      @size-change="value => handleValueChange(value, 'limit')"
+      @current-change="value => handleValueChange(value, 'page')"
     />
   </div>
 </template>
@@ -47,13 +50,13 @@ export default {
 
   watch: {
     page: {
-      handler: function(val, oldVal) {
+      handler: function (val, oldVal) {
         this.pager.page = val
       },
       immediate: true
     },
     limit: {
-      handler: function(val, oldVal) {
+      handler: function (val, oldVal) {
         this.pager.limit = val
       },
       immediate: true
@@ -61,8 +64,12 @@ export default {
   },
   mounted() {
     // 修改分页文案
-    document.getElementsByClassName("el-pagination__jump")[0].childNodes[0].nodeValue = "跳至"
-    document.getElementsByClassName("el-pagination__jump")[0].childNodes[2].nodeValue = ""
+    document.getElementsByClassName(
+      'el-pagination__jump'
+    )[0].childNodes[0].nodeValue = '跳至'
+    document.getElementsByClassName(
+      'el-pagination__jump'
+    )[0].childNodes[2].nodeValue = ''
   },
 
   methods: {
@@ -71,11 +78,10 @@ export default {
       const values = {
         ...this.pager,
         [field]: value,
-        page: field === "limit" ? 1 : value
+        page: field === 'limit' ? 1 : value
       }
-      this.$emit("onChange", values)
+      this.$emit('onChange', values)
     }
   }
 }
 </script>
-