gyyg-components 0.2.4 → 0.2.6

package/package.json

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

package/src/App.vue

@@ -1,189 +1,75 @@
 <template>
   <div id="app">
     <mec-input-table 
-     :tableData="tableData" 
-     :columns="columns" 
-     :inputInfo="inputInfo" 
-     @search="searchHandel" 
-     @refresh="refreshHandel"
-     @row-click="rowClick"
+      :tableData="tableData" 
+      :columns="columns"
+      :height="height"
+      :page="page"
+      :inputInfo="inputInfo"
+      :showSearch="showSearch"
+      @row-click="handleRowClick"
+      @page-size-change="handlePageSizeChange"
+      @page-change="handlePageChange"
+      @show="show"
     ></mec-input-table>
-    <mec-button-group :btnList="btnList"></mec-button-group>
-    <el-form ref="form" :model="formData" :rules="rules" label-width="100px">
-      <el-form-item label="数字输入框" prop="numberInput">
-        <mec-input placeholder="请输入数字" inputType="number" type="number" v-model="formData.numberInput"></mec-input>
-      </el-form-item>
-      <el-form-item label="汉字输入框" prop="chineseInput">
-        <mec-input placeholder="请输入汉字" inputType="chinese" type="text" v-model="formData.chineseInput"></mec-input>
-      </el-form-item>
-      <el-form-item label="英文输入框" prop="englishInput">
-        <mec-input placeholder="请输入英文" inputType="english" type="text" v-model="formData.englishInput"></mec-input>
-      </el-form-item>
-      <el-form-item label="自定义正则输入框" prop="regexInput">
-        <mec-input placeholder="请按正则输入" inputType="regex" type="text" :maxlength="11" v-model="formData.regexInput">
-        </mec-input>
-      </el-form-item>
-      <el-form-item label="正常输入框" prop="input">
-        <mec-input placeholder="输入" type="text" :clearable="true" v-model="formData.input" @clear="clear">
-        </mec-input>
-      </el-form-item>
-      <el-form-item label="文本域" prop="input">
-        <mec-input placeholder="输入" type="textarea" v-model="formData.textarea" :autosize="{minRows: 2, maxRows: 4}" :rows="2">
-        </mec-input>
-      </el-form-item>
-      <el-button @click="submitForm">提交</el-button>
-    </el-form>
-    <mec-table 
-    :tableData="tableData" 
-    :columns="columns" 
-    :selection="true"
-    @selection-change="selectionChange"
-    @row-click="rowClick"
-    :highlightSelectionRow="true"
-    ></mec-table>
   </div>
+
 </template>
 
 <script>
 
 export default {
-  name: 'App',
   data() {
-    const _this = this;
     return {
-      btnList: [
-        // 按钮列表配置
-        {
-                    text: '转资审租',
-                    componentType: 'mec-popover-button',
-                    size: 'medium',
-                    type: 'primary',
-                    disabled: false,
-                    id: 'popover',
-                    options: [
-                        {
-                            label: '转谈判组',
-                            value: '1',
-                        },
-                        {
-                            label: '转呈批组',
-                            value: '1',
-                        },
-                        {
-                            label: '转签约组',
-                            value: '1',
-                        },
-                    ],
-                    trigger() {
-                        console.log('按钮点击');
-                    },
-                    callback(row) {
-                        console.log(row);
-                        
-                    }
-                }
-      ],
-      formData: {
-        numberInput: '',
-        chineseInput: '',
-        regexInput: '',
-        englishInput: '',
-        input: '',
-        textarea: ''
+      inputInfo: {
+        inputPlaceholder: '请输入',
+        clearable: true,
+        disabled: false,
+        tablePlaceholder: '请输入'
       },
-      rules: {
-        numberInput: [
-          { required: true, message: '数字输入框不能为空', trigger: 'blur' },
-        ],
-        chineseInput: [
-          { required: true, message: '汉字输入框不能为空', trigger: 'blur' },
-        ],
-        englishInput: [
-          { required: true, message: '英文输入框不能为空', trigger: 'blur' },
-        ],
-        regexInput: [
-          { required: true, message: '自定义正则输入框不能为空', trigger: 'blur' },
-          { validator: this.validateRegex, message: '请按正则输入内容', trigger: 'blur' }
-        ]
+      showSearch: true,
+      showSelection: true,
+      height: '200',
+      page: {
+        currentPage: 1,
+				total: 100,
+				pageSize: 20,
       },
-      regexInfo: /^(?:(?:\+|00)86)?1[3-9]\d{9}$/,
       tableData: [
-        { name: 'hss', age: 18, dept: '技术部' },
-        { name: 'hss2', age: 18, dept: '技术部' }
+        { name: '数据1', value: 'value1' },
+        { name: '数据2', value: 'value2' },
+        { name: '数据3', value: 'value3' },
       ],
       columns: [
         {
-          label: '姓名',
-          bind: 'name'
+          bind: 'name',
+          label: '姓名'
         },
         {
-          label: '年龄',
-          bind: 'age',
-        },
-        {
-          label: '部门',
-          bind: 'dept'
+          label: '编码',
+          bind: 'value'
         }
-      ],
-      inputInfo: {
-        inputPlaceholder: '科室',
-        tablePlaceholder: '姓名/科室',
-        inputValue: ''
-      }
+      ]
     };
   },
   methods: {
-    change(val) {
-      console.log(val);
+    handleRowClick(row) {
+      console.log('Row clicked:', row);
     },
-    validateRegex(rule, value, callback) {
-      const reg = this.regexInfo;
-      if (reg.test(value)) {
-        callback();
-      } else {
-        callback(new Error('请按正则输入内容'));
-      }
+    handlePageSizeChange(val) {
+      console.log('Page size changed:', val);
+      // 在这里处理 page-size-change 事件
     },
-    submitForm() {
-      this.$refs.form.validate((valid) => {
-        if (valid) {
-          console.log('表单验证通过');
-        } else {
-          console.log('表单验证失败');
-        }
-      });
-    },
-    updateArrayById(arr, updateConfigs) {
-      const newArray = arr.map(item => ({ ...item }));
-      updateConfigs.forEach(config => {
-        const index = newArray.findIndex(el => el.id === config.id);
-        if (index !== -1) {
-          for (const key in config) {
-            if (key !== 'id') {
-              newArray[index][key] = config[key];
-            }
-          }
-        }
-      });
-      return newArray;
-    },
-    clear() {
-      console.log('清除操作');
+    handlePageChange(val) {
+      console.log('Page changed:', val);
     },
-    searchHandel(val) {
-      console.log(val);
+    handleCurrentChange(val) {
+      console.log('Current change:', val);
     },
-    refreshHandel() {
-      console.log('重置')
-    },
-    rowClick(row) {
-      console.log(row);
-      this.inputInfo.inputValue = row.name  // 赋值操作
-    },
-    selectionChange(val) {
-      console.log(val, 123);
+    show() {
+      console.log('显示');
+      
     }
-
   }
 };
 </script>

package/src/components/MecInputTable/MecInputTable.vue

@@ -1,32 +1,48 @@
 <template>
     <div>
-        <el-dropdown trigger="click" @visible-change="visibleChange">
-            <el-input 
-                :placeholder="inputInfo.inputPlaceholder" 
-                v-model="inputValue" 
-                class="el-dropdown-link"
-                readonly
-                :suffix-icon="showDropdown ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></el-input>
-                <el-dropdown-menu slot="dropdown"  class="mec-input-table">
-                    <div class="search-table">
-                         <el-input 
-                            :placeholder="inputInfo.tablePlaceholder"
-                            v-model="tableInput"
-                            @input="tableInputHandel"
-                        ></el-input>
-                        <el-button type="primary" size="medium" @click="search">查询</el-button>
-                        <el-button icon="el-icon-refresh" size="medium" @click="refresh"></el-button>
-                    </div>
-                   
-                    <el-dropdown-item>
-                        <mec-table 
-                        :tableData="tableData" 
-                        style="width: 100%" 
-                        @row-click="handleTableRowClick"
-                        :columns="columns">
-                        </mec-table>
-                    </el-dropdown-item>
-                </el-dropdown-menu>
+        <el-dropdown trigger="click" ref="dropdown" @visible-change="visibleChange">
+            <el-input v-model="inputValue" :placeholder="inputInfo.inputPlaceholder" readonly>
+                <template slot="suffix">
+                    <i class="el-input__icon el-icon-arrow-down"></i>
+                </template>
+            </el-input>
+            <el-dropdown-menu slot="dropdown">
+                <div class="search-table" v-if="showSearch">
+                    <el-input 
+                        :placeholder="inputInfo.tablePlaceholder"
+                        v-model="tableInput"
+                    ></el-input>
+                    <el-button type="primary" size="medium" @click="search">查询</el-button>
+                    <el-button icon="el-icon-refresh" size="medium" @click="refresh"></el-button>
+                </div>
+                <el-table :data="tableData" style="width: 100%" @row-click="rowClick">
+                    <!-- <el-table-column
+                        type="selection"
+                        :reserve-selection="true"
+                        width="55"
+                        v-if="showSelection"
+                    ></el-table-column> -->
+                    <el-table-column
+                        v-for="(item, index) in columns"
+                        :key="index"
+                        :prop="item.bind"
+                        :label="item.label"
+                        :show-overflow-tooltip="true"
+                        :width="item.width"
+                    >
+                    </el-table-column>
+                
+                </el-table>
+                <el-pagination
+                    @size-change="handleSizeChange"
+                    @current-change="handleCurrentChange"
+                    :current-page="page.currentPage"
+                    :page-sizes="[10, 20, 30, 50]"
+                    :page-size="page.pageSize"
+                    layout="total, sizes, prev, pager, next"
+                    :total="page.total">
+                </el-pagination>
+            </el-dropdown-menu>
         </el-dropdown>
     </div>
 </template>
@@ -43,8 +59,23 @@ export default {
             type: Array,
             default: () => []
         },
+        showSelection: {
+            type: Boolean,
+            default: false
+        },
         inputInfo: {
             default: {}
+        },
+        showSearch:{
+            type: Boolean,
+            dafault: true
+        },
+        page: {
+            default: {}
+        },
+        toggleRow: {
+            type: Boolean,
+            default: true
         }
     },
     data() {
@@ -55,12 +86,18 @@ export default {
         };
     },
     methods: {
-        handleTableRowClick(row) {
+        rowClick(row) {
+            if(this.toggleRow) {
+                this.$refs.dropdown.hide()
+            }
             this.$emit('row-click', row)
-            this.showDropdown = false;
         },
         visibleChange(val) {
             this.showDropdown = val
+            if(val) {
+                this.$emit('show')
+            }
+           
         },
         tableInputHandel(val) {
             this.$emit('input', val)
@@ -71,6 +108,13 @@ export default {
         refresh() {
             this.tableInput = ''
             this.$emit('refresh')
+        },
+        handleSizeChange(val) {
+            this.$refs.dropdown.show()
+            this.$emit('size-change', val)
+        },
+        handleCurrentChange(val) {
+            this.$emit('current-change', val)
         }
 
     },
@@ -103,4 +147,7 @@ export default {
         margin-left: 15px;
     }
 }
+/deep/ .el-pagination {
+    margin-top: 15px;
+}
 </style>