byt-ui 0.0.16 → 0.0.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "byt-ui",
-  "version": "0.0.16",
+  "version": "0.0.17",
   "private": false,
   "description": "byt组件库",
   "author": {

package/packages/components/basic-view/demo.vue

@@ -29,16 +29,83 @@
 </template>
 
 <script>
+import moment from "moment"
 export default {
-  name: 'demo',
+  name: 'default-demo',
   components: {},
   data() {
     return {
       searchList: [
         {
-          label: '用户名',
-          key: 'username',
-          type: 'input'
+          label: '输入框',
+          key: 'input',
+          type: 'input',
+          default:"abc"
+        },
+        {
+          label: '下拉框',
+          key: 'select',
+          type: 'select',
+          default:1,
+          options:[
+            {label:"a",value:1},
+            {label:"b",value:2},
+            {label:"c",value:3},
+            {label:"d",value:4}
+          ]
+        },
+        {
+          label: '级联选择',
+          key: 'cascader',
+          type: 'cascader',
+          default:"yizhi",
+          options:[{
+            value: 'zhinan',
+            label: '指南',
+            children: [{
+              value: 'shejiyuanze',
+              label: '设计原则',
+              children: [{
+                value: 'yizhi',
+                label: '一致'
+              }, {
+                value: 'fankui',
+                label: '反馈'
+              }, {
+                value: 'xiaolv',
+                label: '效率'
+              }, {
+                value: 'kekong',
+                label: '可控'
+              }]
+            }]
+          }]
+        },
+        {
+          label: '年月日',
+          key: 'date',
+          type: 'datepicker',
+          default:moment().format("YYYY-MM-DD")
+        },
+        {
+          label: '年月',
+          key: 'month',
+          type: 'datepicker',
+          fields:"month",
+          default:moment().format("YYYY-MM")
+        },
+        {
+          label: '年',
+          key: 'year',
+          type: 'datepicker',
+          fields:"year",
+          default:moment().format("YYYY")
+        },
+        {
+          label: '日期区间',
+          key: 'daterange',
+          type: 'daterange',
+          default:["2023-06-05","2023-06-07"]
         }
       ],
       tableData: [],
@@ -79,6 +146,9 @@ export default {
     },
     refreshChange() {
       this.$refs.baseView.refresh();
+    },
+    onClear(){
+      this.$refs.baseView.clear();
     }
   }
 }

package/packages/components/basic-view/index.vue

@@ -2,8 +2,8 @@
  * @Description:
  * @Author: 王国火
  * @Date: 2022-07-12 17:47:20
- * @LastEditTime: 2022-11-04 13:45:52
- * @LastEditors: sxy
+ * @LastEditTime: 2023-06-07 08:31:20
+ * @LastEditors: 王国火
 -->
 
 <template>
@@ -17,6 +17,7 @@
         :search-list="searchList"
         @search="onSearch"
         @reset="onReset"
+        @init="init"
         v-model="searchForm"
       ></FormView>
     </div>
@@ -196,10 +197,14 @@ export default {
     }
   },
   mounted() {
-    // 有些特殊情况需要手动请求列表数据
-    if (this.autoLoad) this.fetchData();
+    
   },
   methods: {
+    init(form){
+      this.searchForm=Object.assign({},this.searchForm,form);
+      // 有些特殊情况需要手动请求列表数据
+      if (this.autoLoad) this.fetchData();
+    },
     onSelectAllEvent(list) {
       /** 多选框全选触发
 			 * @event checkbox-all
@@ -259,6 +264,9 @@ export default {
       this.searchForm = {};
       this.fetchData();
     },
+    clear(){
+      this.$refs.search.init();
+    },
     onSizeChange(size) {
       this.pageOpt.pageSize = size;
       this.pageOpt.page = 1;
@@ -271,13 +279,6 @@ export default {
       this.$nextTick(() => {
         this.fetchData();
       })
-    },
-    initForm(list) {
-      list.map(v => {
-        if (v.value || v.value == 0) {
-          this.$set(this.searchForm, v.key, v.value)
-        }
-      })
     }
   },
   watch: {
@@ -289,13 +290,6 @@ export default {
       },
       immediate: true,
       deep: true
-    },
-    searchList: {
-      handler(val) {
-        this.initForm(val)
-      },
-      immediate: true,
-      deep: true
     }
   }
 }

package/packages/components/form-view/index.vue

@@ -2,8 +2,8 @@
  * @Description:
  * @Author: 王国火
  * @Date: 2022-07-13 08:46:34
- * @LastEditTime: 2022-11-04 13:44:45
- * @LastEditors: sxy
+ * @LastEditTime: 2023-06-07 08:53:12
+ * @LastEditors: 王国火
 -->
 <!--  -->
 <template>
@@ -58,7 +58,6 @@
           :picker-options="pickerOptions"
         >
         </el-date-picker>
-        <!-- fields可选值:date、month、year -->
       </template>
     </el-form-item>
 
@@ -131,7 +130,9 @@ export default {
   },
   components: {},
   computed: {},
-  mounted() {},
+  mounted() {
+    
+  },
   methods: {
     formateDate(type) {
       // date、week 、month、year
@@ -169,17 +170,41 @@ export default {
           if (v)resolve(v)
         })
       })
+    },
+    setDefaultVal(el) {
+      // 处理默认值,可拓展
+      const dval = el.default;// 默认值
+      switch (el.type) {
+        case 'input':
+        case 'select':
+          return (dval === 0 || dval === '0') ? dval : (dval || '')
+        case 'inputNumber':
+          return dval === 0 ? dval : (dval || null)
+        case 'treeSelect':
+          return [];
+        default:
+          return (dval === 0 || dval === '0') ? dval : (dval || '')
+      }
+    },
+    formatForm(list) {
+      //有些查询条件初始携带默认值，需要处理；
+      this.form = Object.assign({}, this.form, list.reduce((obj, el) => {
+        obj[el.key] = this.setDefaultVal(el)
+        return obj
+      }, {}))
+    },
+    init(){
+      this.formatForm(this.searchList);
+      this.$emit('init', this.form)
     }
   },
   watch: {
-    value: {
-      handler(val) {
-        if (JSON.stringify(val) != JSON.stringify(this.form)) {
-          this.form = Object.assign({}, this.form, val);
-        }
+    searchList:{
+      handler(){
+        this.init();
       },
-      immediate: true,
-      deep: true
+      immediate:true,
+      deep:true
     },
     form: {
       handler(val) {