gyyg-components 0.2.6 → 0.2.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gyyg-components",
-  "version": "0.2.6",
+  "version": "0.2.7",
   "private": false,
   "main": "lib/gyyg-components.umd.js",
   "scripts": {

package/src/App.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="app">
-    <mec-input-table 
+    <!-- <mec-input-table 
       :tableData="tableData" 
       :columns="columns"
       :height="height"
@@ -10,8 +10,13 @@
       @row-click="handleRowClick"
       @page-size-change="handlePageSizeChange"
       @page-change="handlePageChange"
-      @show="show"
-    ></mec-input-table>
+      @show="show" 
+    ></mec-input-table>-->
+    <mec-search-form
+    :formGroups="formGroups"
+    >
+
+    </mec-search-form>
   </div>
 
 </template>
@@ -20,56 +25,118 @@
 
 export default {
   data() {
+    const _this = this
     return {
-      inputInfo: {
-        inputPlaceholder: '请输入',
-        clearable: true,
-        disabled: false,
-        tablePlaceholder: '请输入'
-      },
-      showSearch: true,
-      showSelection: true,
-      height: '200',
-      page: {
-        currentPage: 1,
-				total: 100,
-				pageSize: 20,
-      },
-      tableData: [
-        { name: '数据1', value: 'value1' },
-        { name: '数据2', value: 'value2' },
-        { name: '数据3', value: 'value3' },
-      ],
-      columns: [
+      formGroups: [
         {
-          bind: 'name',
-          label: '姓名'
+          componentName: 'mec-select',
+          value: '',
+          prop: 'a',
+          componentProps: {
+            options: [
+              { id: 'option1', name: '选项1' },
+              { id: 'option2', name: '选项2' },
+              { id: 'option3', name: '选项3' }
+            ],
+            placeholder: '请选择一个选项',
+            clearable: true,
+            filterable: true,
+            props: {
+              label: 'name',
+              value: 'id'
+            }
+          },
+          componentListeners: {
+            change: (val) => {
+              this.formGroups[0].value = val
+              console.log(this.formGroups[0].value);
+            },
+            clear: () => {
+              console.log(_this);
+            }
+          }
         },
         {
-          label: '编码',
-          bind: 'value'
+          label: '选择项',
+          componentName: 'MecInputTable',
+          value: '',
+          prop: 'b',
+          componentProps: {
+            tableData: [
+              { name: 'John', age: 30, address: 'New York' },
+              { name: 'Tom', age: 25, address: 'London' },
+              { name: 'Jerry', age: 35, address: 'Paris' }
+            ],
+            columns: [
+              { label: '姓名', bind: 'name' },
+              { label: '年龄', bind: 'age' },
+              { label: '地址', bind: 'address' }
+            ],
+            inputInfo: {
+              inputPlaceholder: '点击选择',
+              tablePlaceholder: '请输入',
+            },
+            showSearch: true,
+            page: {
+              currentPage: 1,
+              pageSize: 10,
+              total: 3
+            }
+          },
+          componentListeners: {
+            'row-click': (row) => {
+              _this.formGroups[1].value = row.name
+              console.log('Row clicked:', row);
+            },
+            'size-change': (val) => {
+              console.log('Page size changed:', val);
+            },
+            'current-change': (val) => {
+              console.log('Page changed:', val);
+            },
+            'show': () => {
+              console.log('Dropdown shown');
+            },
+            'input': (val) => {
+              console.log('Input changed:', val);
+            },
+            'search': (val) => {
+              console.log('Search:', val);
+            },
+            'refresh': () => {
+              console.log('Refreshed');
+            }
+          }
         }
       ]
     };
   },
   methods: {
-    handleRowClick(row) {
-      console.log('Row clicked:', row);
-    },
-    handlePageSizeChange(val) {
-      console.log('Page size changed:', val);
-      // 在这里处理 page-size-change 事件
-    },
-    handlePageChange(val) {
-      console.log('Page changed:', val);
+    handleSelectChange(val) {
+      console.log('Selected value changed:', val);
     },
-    handleCurrentChange(val) {
-      console.log('Current change:', val);
-    },
-    show() {
-      console.log('显示');
-      
+    handleSelectClear() {
+      console.log('Selection cleared');
     }
   }
+  // methods: {
+  //   handleRowClick(row) {
+  //     console.log('Row clicked:', row);
+  //   },
+  //   handlePageSizeChange(val) {
+  //     console.log('Page size changed:', val);
+  //     // 在这里处理 page-size-change 事件
+  //   },
+  //   handlePageChange(val) {
+  //     console.log('Page changed:', val);
+  //   },
+  //   handleCurrentChange(val) {
+  //     console.log('Current change:', val);
+  //   },
+  //   show() {
+  //     console.log('显示');
+      
+  //   }
+  // }
 };
 </script>

package/src/components/MecInputTable/MecInputTable.vue

@@ -76,6 +76,9 @@ export default {
         toggleRow: {
             type: Boolean,
             default: true
+        },
+        value: {
+           default: '' 
         }
     },
     data() {
@@ -119,7 +122,7 @@ export default {
 
     },
     watch: {
-        'inputInfo.inputValue': {
+        value: {
             handler(val) {
                 this.inputValue = val
             },

package/src/components/MecSearchForm/MecSearchForm.js

@@ -0,0 +1,5 @@
+import MecSearchForm from "./MecSearchForm.vue";
+
+MecSearchForm.install = Vue => Vue.component(MecSearchForm.name, MecSearchForm); //注册组件
+
+export default MecSearchForm;

package/src/components/MecSearchForm/MecSearchForm.vue

@@ -0,0 +1,55 @@
+<template>
+    <div>
+        <el-form ref="form" :model="formModel" :inline="true">
+            <template v-for="(item, index) in formGroups">
+                <el-form-item 
+                    :key="index"
+                    :label="item.label ? item.label : null"
+                    :label-width="item.label?item.labelWidth:'0px'"
+                    :rules="item.rules"
+                    :prop="getProp(item,index)"
+                >
+                <component :is="item['componentName']"
+                   v-model="item.value"
+                   v-bind="item.componentProps"
+                   v-on="item.componentListeners"
+                   ></component>
+                </el-form-item>
+                
+            </template>
+            <el-button type="primary" @click="search">查询</el-button>
+        </el-form>
+    </div>
+</template>
+<script>
+export default {
+    name: 'MecSearchForm',
+    props: {
+        formGroups: {
+            type: Array,
+            default: () => []
+        }
+    },
+    data() {
+        return {
+            formModel: this.createFormModel(this.formGroups)
+        };
+    },
+    methods: {
+        createFormModel(formGroups) {
+            const model = {};
+            formGroups.forEach(item => {
+                model[item.prop] = item.value;
+            });
+            return model;
+        },
+        getProp (item, index) {
+            let propName = item.prop ? item.prop : index + ".value";
+            return propName;
+        },
+        search() {
+            console.log(this.formGroups)
+        }
+    }
+}
+</script>

package/src/components/MecSelect/MecSelect.js

@@ -0,0 +1,5 @@
+import MecSelect from "./MecSelect.vue";
+
+MecSelect.install = Vue => Vue.component(MecSelect.name, MecSelect); //注册组件
+
+export default MecSelect;

package/src/components/MecSelect/MecSelect.vue

@@ -0,0 +1,92 @@
+<template>
+  <el-select
+    v-model="selected"
+	  @clear="clear"
+    @change="handleChange"
+    :placeholder="placeholder"
+    :multiple="multiple || false"
+    :clearable="clearable"
+    :disabled="disabled"
+    :size="size"
+    v-bind="$attrs"
+    :filterable="filterable"
+  >
+    <el-option
+      v-for="item in options"
+      :key="item[props.value]"
+      :label="item[props.label]"
+      :value="item[props.value]"
+      :disabled="item.disabled"
+    ></el-option>
+  </el-select>
+</template>
+
+<script>
+export default {
+  name: "MecSelect",
+  props: {
+    value: {
+      default: null,
+      required: true,
+    },
+    options: {
+      type: Array,
+      required: true,
+      default: () => [],
+    },
+    multiple: {
+      default: false,
+    },
+    props: {
+      default() {
+        return {
+          label: "label",
+          value: "value",
+        };
+      },
+    },
+    placeholder: {
+      type: String,
+      default: "请选择",
+    },
+    clearable: {
+      type: Boolean,
+    },
+    disabled: {
+      type: Boolean,
+      defalut: false,
+    },
+    size: String,
+    filterable: {
+      type: Boolean,
+      defalut: false,
+    },
+  },
+  data() {
+    return {
+      selected: this.value,
+    };
+  },
+  watch: {
+    value: {
+      handler(val) {
+        this.selected = val;
+      },
+      immediate: true,
+    },
+  },
+  methods: {
+    handleChange(val) {
+      this.$emit("change", val);
+    },
+	clear() {
+		this.selected = '';
+		this.$emit('clear')
+	}
+  },
+};
+</script>
+
+<style scoped>
+/* 你可以在这里添加自定义样式 */
+</style>