gyyg-components 0.2.1 → 0.2.2

package/package.json

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

package/src/App.vue

@@ -1,46 +1,149 @@
 <template>
   <div id="app">
-    <!-- <gyyg-layout>
-        <template slot="table">
-        <gyyg-table :data='data' @selection-change="change" >
-            <template slot='content'>
-                <el-table-column type="selection" width="55"> </el-table-column>
-                <el-table-column prop='a'></el-table-column>
-            </template>
-        </gyyg-table>
-        </template>
-    </gyyg-layout> -->
+    <mec-input-table 
+     :tableData="tableData" 
+     :columns="columns" 
+     :inputInfo="inputInfo" 
+     @search="searchHandel" 
+     @refresh="refreshHandel"
+     @row-click="rowClick"
+    ></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>
   </div>
 </template>
 
 <script>
+
 export default {
   name: 'App',
-  data(){
-    return{
-        // text:'',
-        // data:[
-        //     {
-        //         a:'1322'
-        //     }
-        // ]
-    }
+  data() {
+    const _this = this;
+    return {
+      btnList: [
+        // 按钮列表配置
+      ],
+      formData: {
+        numberInput: '',
+        chineseInput: '',
+        regexInput: '',
+        englishInput: '',
+        input: '',
+        textarea: ''
+      },
+      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' }
+        ]
+      },
+      regexInfo: /^(?:(?:\+|00)86)?1[3-9]\d{9}$/,
+      tableData: [
+        { name: 'hss', age: 18, dept: '技术部' },
+        { name: 'hss2', age: 18, dept: '技术部' }
+      ],
+      columns: [
+        {
+          label: '姓名',
+          bind: 'name'
+        },
+        {
+          label: '年龄',
+          bind: 'age',
+        },
+        {
+          label: '部门',
+          bind: 'dept'
+        }
+      ],
+      inputInfo: {
+        inputPlaceholder: '科室',
+        tablePlaceholder: '姓名/科室',
+        inputValue: ''
+      }
+    };
   },
-  methods:{
-    change(val){
-        console.log(val)
+  methods: {
+    change(val) {
+      console.log(val);
+    },
+    validateRegex(rule, value, callback) {
+      const reg = this.regexInfo;
+      if (reg.test(value)) {
+        callback();
+      } else {
+        callback(new Error('请按正则输入内容'));
+      }
+    },
+    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('清除操作');
+    },
+    searchHandel(val) {
+      console.log(val);
+    },
+    refreshHandel() {
+      console.log('重置')
+    },
+    rowClick(row) {
+      console.log(row);
+      this.inputInfo.inputValue = row.name  // 赋值操作
     }
-  }
-}
-</script>
 
-<style>
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
-}
-</style>
+  }
+};
+</script>

package/src/components/MecButtonGroup/MecButtonGroup.js

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

package/src/components/MecButtonGroup/MecButtonGroup.vue

@@ -0,0 +1,59 @@
+<template>
+    <div class="btn-group">
+        <div v-for="btn in btnList" :key="btn.id">
+            <el-button 
+                v-if="!btn['componentType']"
+                v-has-permi="[btn.hasPermi]"
+                :disabled="btn.disabled"
+                :size="btn.size"
+                :type="btn.type"
+                :icon="!btn.rightIcon ? btn.icon: ''"
+                :loading="btn.loading"
+                @click="btnClick(btn)"
+                >{{ btn.text }}
+                <i v-if="btn.rightIcon" :class="btn.icon + ' el-icon--right'"></i>
+            </el-button>
+            <div v-else>
+                <component
+                 :is="btn['componentType']"
+                 :btnInfo="btn"
+                ></component>
+            </div>
+        </div>
+        
+    </div>
+</template>
+<script>
+
+export default {
+    name: 'MecButtonGroup',
+    props: {
+        // 按钮组数据
+        btnList: {
+            required: true,
+        },
+    },
+    methods: {
+        // 按钮点击事件
+        btnClick(btn) {
+            
+            if(btn.trigger){
+                btn.trigger()
+            }
+        }
+    },
+}
+</script>
+<style lang="less" scoped>
+.btn-group {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    &>div {
+        margin-left: 15px;
+        margin-bottom: 15px;
+    }
+}
+</style>
+
+    

package/src/components/MecInput/MecInput.js

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

package/src/components/MecInput/MecInput.vue

@@ -0,0 +1,132 @@
+<template>
+    <el-input
+      v-model="inputValue"
+      :placeholder="placeholder"
+      :type="inputTypeValue"
+      :disabled="disabled"
+      :readonly="readonly"
+      :size="size"
+      :maxlength="maxlength"
+      :show-word-limit="showWordLimit"
+      :clearable="clearable"
+      :prefix-icon="prefixIcon"
+      :suffix-icon="suffixIcon"
+      :rows="rows"
+      :autosize="autosize"
+      @input="handleInput"
+      @clear="clear"
+    ></el-input>
+  </template>
+  
+  <script>
+  export default {
+    name: 'MecInput',
+    props: {
+      // 输入框的占位符
+      placeholder: {
+        type: String,
+        default: ''
+      },
+      // 输入类型限制，可选值为 'number'（数字）、'chinese'（汉字）、'english'（英文字母）、'regex'（自定义正则）
+      inputType: {
+        type: String,
+        default: 'text'
+      },
+      // 当inputType为'regex'时，传入的正则表达式字符串
+      regex: {
+        type: String,
+        default: ''
+      },
+      // 输入框类型（对应原生input类型），如 'text'、'password'等
+      type: {
+        type: String,
+        default: 'text'
+      },
+      // 是否禁用
+      disabled: {
+        type: Boolean,
+        default: false
+      },
+      // 是否只读
+      readonly: {
+        type: Boolean,
+        default: false
+      },
+      // 尺寸大小，可选值'medium'、'small'、'mini'
+      size: {
+        type: String,
+        default: 'medium'
+      },
+      // 最大长度
+      maxlength: {
+        type: [Number, String],
+        default: -1
+      },
+      // 是否显示字数限制提示
+      showWordLimit: {
+        type: Boolean,
+        default: false
+      },
+      // 是否可清空
+      clearable: {
+        type: Boolean,
+        default: false
+      },
+      // 前缀图标名称
+      prefixIcon: {
+        type: String,
+        default: ''
+      },
+      // 后缀图标名称
+      suffixIcon: {
+        type: String,
+        default: ''
+      },
+      // 文本域行数（当type为'textarea'时有效）
+      rows: {
+        default: 1
+      },
+      // 文本域是否自适应大小（当type为'textarea'时有效）
+      autosize: {
+        default: false
+      },
+    },
+    data() {
+      return {
+        inputValue: ''
+      };
+    },
+    computed: {
+      inputTypeValue() {
+        return this.inputType === 'textarea'? 'textarea' : this.type;
+      }
+    },
+    methods: {
+      handleInput(val) {
+        let value = val;
+        
+        if (this.inputType === 'number') {
+          // 只允许输入数字
+          value = value.replace(/[^0-9]/g, '');
+        } else if (this.inputType === 'chinese') {
+          // 只允许输入汉字
+          value = value.replace(/[^\u4e00-\u9fa5]/g, '');
+        } else if (this.inputType === 'english') {
+          // 只允许输入英文
+          value = value.replace(/[^a-zA-Z]/g, '');
+        }
+        this.inputValue = value
+        
+        this.$emit('input', value);
+      },
+      clear() {
+        this.$emit('clear')
+      }
+    },
+    watch: {
+      value(newValue) {
+        this.inputValue = newValue;
+      }
+    }
+  };
+  </script>

package/src/components/MecInputTable/MecInputTable.js

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

package/src/components/MecInputTable/MecInputTable.vue

@@ -0,0 +1,106 @@
+<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>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'MecInputTable',
+    props: {
+        tableData: {
+            type: Array,
+            default: () => []
+        },
+        columns: {
+            type: Array,
+            default: () => []
+        },
+        inputInfo: {
+            default: {}
+        }
+    },
+    data() {
+        return {
+            inputValue: '',
+            showDropdown: false,
+            tableInput: ''
+        };
+    },
+    methods: {
+        handleTableRowClick(row) {
+            this.$emit('row-click', row)
+            this.showDropdown = false;
+        },
+        visibleChange(val) {
+            this.showDropdown = val
+        },
+        tableInputHandel(val) {
+            this.$emit('input', val)
+        },
+        search() {
+            this.$emit('search', this.tableInput)
+        },
+        refresh() {
+            this.tableInput = ''
+            this.$emit('refresh')
+        }
+
+    },
+    watch: {
+        'inputInfo.inputValue': {
+            handler(val) {
+                this.inputValue = val
+            },
+            immediate: true,
+            deep: true
+        },
+    }
+};
+</script>
+<style lang="less" scoped>
+.mec-input-table {
+    /deep/ .el-dropdown-menu__item {
+        line-height: 0;
+        padding: 0;
+    }
+}
+.search-table {
+    padding: 0 10px;
+    display: flex;
+    align-items: center;
+    /deep/ .el-input {
+        width: 150px;
+    }
+    /deep/ .el-button {
+        margin-left: 15px;
+    }
+}
+</style>

package/src/components/MecPopoverButton/MecPopoverButton.js

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

package/src/components/MecPopoverButton/MecPopoverButton.vue

@@ -0,0 +1,47 @@
+<template>
+    <div class="popover-button" v-has-permi="[btnInfo.hasPermi]">
+        <el-dropdown 
+            :size="btnInfo.size" 
+            split-button 
+            :type="btnInfo.type" 
+            :disabled="btnInfo.disabled"
+            trigger="click"
+            placement="bottom-end"
+            @click="clickEvent"
+            @command="changeItem"
+            >
+            {{ btnInfo.text}}
+            <el-dropdown-menu slot="dropdown" class="right-arrow">
+                <el-dropdown-item 
+                v-for="item in btnInfo.options" 
+                :key="item.id"
+                :command="item"
+                >{{ item.label }}</el-dropdown-item>
+            </el-dropdown-menu>
+        </el-dropdown>
+    </div>
+</template>
+<script>
+export default {
+    name: 'MecPopoverButton',
+    props: ['btnInfo'],
+    methods: {
+        clickEvent(){
+            if(this.btnInfo.trigger) {
+                this.btnInfo.trigger()
+            }
+        },
+        changeItem(value) {
+           this.btnInfo.callback(value)
+            
+        }
+    }
+}
+</script>
+<style lang="less" scoped>
+.right-arrow {
+    /deep/ .popper__arrow {
+        left: 65% !important;
+    }
+}
+</style>

package/src/components/MecTable/MecTable.vue

@@ -17,6 +17,7 @@
 			@select="select"
             :row-style="selectedRowStyle"
             :default-expand-all="defaultExpandAll"
+            @row-click="rowClickHandel"
             >
             <!-- 多选框 -->
              <el-table-column
@@ -219,6 +220,10 @@ export default {
 			this.multipleSelection = column
 			this.$emit('selection-change', column);
 		},
+        // 行点击触发的事件
+        rowClickHandel(column) {
+            this.$emit('row-click', column)
+        }
 
     },
     watch: {

package/src/directive/hasPermi.js

@@ -0,0 +1,29 @@
+ /**
+ * 操作权限处理
+ * Copyright (c) 2019 chuangshi
+ */
+ import Vue from 'vue'
+let authorities = localStorage.getItem('authorities') || 'aaa,bbb,ccc'
+ Vue.directive('hasPermi', {
+    inserted(el, binding, vnode) {
+    const { value } = binding
+    const all_permission = "*:*:*";
+        const permissions = authorities.split(',')//用户拥有的权限
+    if (value && value instanceof Array && value.length > 0) {
+        const permissionFlag = value//
+
+        const hasPermissions = permissions.some(permission => {
+        return all_permission === permission || permissionFlag.includes(permission)
+        })
+        console.log(hasPermissions,'hasPermissions')
+        if (!hasPermissions) {
+            console.log(el.parentNode);
+            
+            el.parentNode && el.parentNode.removeChild(el)
+        }
+    } else {
+        throw new Error(`请设置操作权限标签值`)
+    }
+    }
+  })
+ 

package/src/main.js

@@ -2,16 +2,8 @@ import Vue from 'vue'
 import App from './App.vue'
 
 Vue.config.productionTip = false
-import { Dialog,Button,Pagination,Input,Table,TableColumn,Icon, Switch, Tooltip } from 'element-ui';
-Vue.use(Dialog)
-Vue.use(Button)
-Vue.use(Pagination)
-Vue.use(Input)
-Vue.use(Table)
-Vue.use(TableColumn)
-Vue.use(Icon)
-Vue.use(Switch)
-Vue.use(Tooltip)
+import ElementUI from 'element-ui';
+Vue.use(ElementUI)
 
 import zj from '@/index.js'
 Vue.use(zj)