gyyg-components 0.2.7 → 0.2.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gyyg-components",
-  "version": "0.2.7",
+  "version": "0.2.9",
   "private": false,
   "main": "lib/gyyg-components.umd.js",
   "scripts": {
@@ -19,7 +19,7 @@
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.5.15",
     "@vue/cli-plugin-eslint": "~4.5.15",
-    "@vue/cli-service": "~4.5.15",
+    "@vue/cli-service": "^4.5.15",
     "babel-eslint": "^10.1.0",
     "eslint": "^6.7.2",
     "eslint-plugin-vue": "^6.2.2",

package/src/App.vue

@@ -12,113 +12,49 @@
       @page-change="handlePageChange"
       @show="show" 
     ></mec-input-table>-->
-    <mec-search-form
-    :formGroups="formGroups"
-    >
+    <!-- <mec-form :formData="formData" :showBtn="true" @submit="submit"></mec-form> -->
 
-    </mec-search-form>
+    <mec-form ref="planForm" :formData="formData" :label-width="'100px'"></mec-form>
+    <mec-popover-button :btnInfo="btnInfo"></mec-popover-button>
   </div>
-
 </template>
 
 <script>
-
 export default {
   data() {
-    const _this = this
+    const _this = this;
     return {
-      formGroups: [
-        {
-          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: '选择项',
-          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);
+      formData:{
+        // 日期组件
+            wpaApplicationDate: {
+                label: '申请日期',
+                componentName: 'mec-date-picker',
+                placeholder: '请选择日期',
+                dateType: 'datetime',
+                col: 12,
+                valueFormat: 'yyyy-MM-dd HH:mm:ss',
+                value: '',
+                rules: [{ required: true, message: '请选择日期', trigger: 'change' }],
             },
-            'show': () => {
-              console.log('Dropdown shown');
-            },
-            'input': (val) => {
-              console.log('Input changed:', val);
-            },
-            'search': (val) => {
-              console.log('Search:', val);
-            },
-            'refresh': () => {
-              console.log('Refreshed');
-            }
-          }
-        }
-      ]
+      },
+      btnInfo: {
+        text: '操作',
+        type: 'primary',
+        disabled: false,
+        hasPermi: '',
+        options: [
+          { id: '1', label: '选项1', hasPermi: '' },
+          { id: '2', label: '选项2', hasPermi: '' },
+          { id: '3', label: '选项3' }
+        ]
+      }
     };
   },
   methods: {
-    handleSelectChange(val) {
-      console.log('Selected value changed:', val);
+    handleEnter() {
+      console.log('enter');
     },
-    handleSelectClear() {
-      console.log('Selection cleared');
-    }
-  }
+  },
   // methods: {
   //   handleRowClick(row) {
   //     console.log('Row clicked:', row);
@@ -135,7 +71,7 @@ export default {
   //   },
   //   show() {
   //     console.log('显示');
-      
+
   //   }
   // }
 };

package/src/components/GyygModal/GyygModal.vue

@@ -187,7 +187,7 @@ export default {
 }
 </script>
 
-<style lang="less">
+<style lang="less" scoped>
 .el-dialog__wrapper {
     overflow: hidden;
     display: flex;

package/src/components/MECDefaultText/MECDefaultText.js

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

package/src/components/MECDefaultText/MECDefaultText.vue

@@ -0,0 +1,9 @@
+<template>
+    <div>{{ value }}</div>
+</template>
+<script>
+export default {
+    name: 'mec-defaultText',
+    props:['value']
+}
+</script>

package/src/components/MecButtonGroup/MecButtonGroup.vue

@@ -1,15 +1,16 @@
 <template>
     <div class="btn-group">
-        <div v-for="btn in btnList" :key="btn.id">
+        <div v-for="btn in btnList" :key="btn.id" 
+             v-has-permi="btn.hasPermi ? [btn.hasPermi] : undefined">
             <el-button 
                 v-if="!btn['componentType']"
-                v-has-permi="[btn.hasPermi]"
                 :disabled="btn.disabled"
-                :size="btn.size"
+                :size="btn.size || 'small'"
                 :type="btn.type"
                 :icon="!btn.rightIcon ? btn.icon: ''"
                 :loading="btn.loading"
                 @click="btnClick(btn)"
+                :plain="btn.plain || true"
                 >{{ btn.text }}
                 <i v-if="btn.rightIcon" :class="btn.icon + ' el-icon--right'"></i>
             </el-button>
@@ -20,7 +21,6 @@
                 ></component>
             </div>
         </div>
-        
     </div>
 </template>
 <script>
@@ -51,7 +51,10 @@ export default {
     flex-wrap: wrap;
     &>div {
         margin-left: 15px;
-        margin-bottom: 15px;
+        margin-bottom: 10px;
+        &:first-child {
+            margin-left: 0;
+        }
     }
 }
 </style>

package/src/components/MecCheckbox/MecCheckbox.js

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

package/src/components/MecCheckbox/MecCheckbox.vue

@@ -0,0 +1,86 @@
+<template>
+    <div class="checkbox-group">
+        <el-checkbox 
+            :indeterminate="isIndeterminate" 
+            v-if="isCheckAll" 
+            v-model="checkAll" 
+            @change="handleCheckAllChange">全选</el-checkbox>
+        <div style="margin: 15px 0;" v-if="isCheckAll" ></div>
+        <el-checkbox-group v-model="checkbox" @change="handleCheckedCitiesChange">
+            <el-checkbox v-for="(item, index) in options" 
+                :label="item[props.value]"
+                :disabled="item.disabled"
+                :key="index">{{ item[props.label] }}</el-checkbox>
+        </el-checkbox-group>
+    </div>
+</template>
+<script>
+const cityOptions = ['上海', '北京', '广州', '深圳'];
+export default {
+    name: 'mec-checkbox',
+    props: {
+        value: {},
+        options: {
+            type: Array,
+            default() {
+                return [];
+            }
+        },
+        props: {
+            default() {
+                return {
+                    label: 'label',
+                    value: 'value'
+                }
+            }
+        },
+        isCheckAll: {
+            default() {
+                return false;
+            }
+        },
+    },
+    data() {
+        return {
+            checkAll: false,
+            checkbox: [],
+            isIndeterminate: true
+        };
+    },
+    watch: {
+        value: {
+            handler (val) {
+                this.checkbox = [].concat(val);
+            },
+            immediate: true
+        },
+    },
+    computed: {
+        checkboxAll () {
+            return this.options.map(item => {
+                return item[this.props.value]
+            })
+        }
+    },
+    methods: {
+        handleCheckAllChange(val) {
+            this.checkbox = val ? this.checkboxAll : [];
+            this.isIndeterminate = false;
+        },
+        handleCheckedCitiesChange(value) {
+            let checkedCount = value.length;
+            this.checkAll = checkedCount === this.checkboxAll.length;
+            this.isIndeterminate = checkedCount > 0 && checkedCount < this.checkboxAll.length;
+            this.$emit('input', value)
+            console.log(value)
+        }
+    }
+};
+</script>
+<style lang="less" scoped>
+.checkbox-group {
+    /deep/ .el-checkbox__label {
+        font-weight: normal;
+    }
+} 
+</style>

package/src/components/MecDatePicker/MecDatePicker.js

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

package/src/components/MecDatePicker/MecDatePicker.vue

@@ -0,0 +1,94 @@
+<template>
+    <div>
+        <el-date-picker 
+            v-model="date" 
+            :type="dateType" 
+            :placeholder="placeholder" 
+            :disabled="disabled"
+            :readonly="readonly" 
+            :size="size" 
+            @change="change" 
+            :picker-options="pickerOptions"
+            :start-placeholder="startPlaceholder" 
+            :end-placeholder="endPlaceholder" 
+            :range-separator="rangeSeparator"
+            :value-format="valueFormat"
+            style="width: 100%;">
+        </el-date-picker>
+    </div>
+</template>
+<script>
+export default {
+    name: 'mec-date-picker',
+    props: {
+        value: {},
+        dateType: {
+            type: String,
+            default: 'date'
+        },
+        placeholder: {
+            type: String,
+            default: '选择日期时间'
+        },
+        disabled: {
+            type: Boolean,
+            default: false
+        },
+        readonly: {
+            type: Boolean,
+            default: false
+        },
+        size: {
+            type: String,
+        },
+        pickerOptions: {
+            type: Object,
+
+        },
+        startPlaceholder: {
+            type: String,
+            default: '开始日期'
+        },
+        endPlaceholder: {
+            type: String,
+            default: '结束日期'
+
+        },
+        rangeSeparator: {
+            type: String,
+            default: '至'
+        },
+        valueFormat: {
+            type: String,
+            default: 'yyyy-MM-dd'
+        }
+
+    },
+    data() {
+        return {
+            date: ''
+        }
+    },
+    methods: {
+        change(val) {
+            this.$emit('change', val);
+        }
+    },
+    watch: {
+        value: {
+            handler(val) {
+                this.date = val;
+            },
+            immediate: true
+        },
+        date: {
+            handler(val) {
+                this.$emit('input', val);
+            }
+
+        }
+    }
+}
+</script>
+<style lang="less" scoped>
+</style>

package/src/components/MecDialog/MecDialog.js

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

package/src/components/MecDialog/MecDialog.vue

@@ -0,0 +1,225 @@
+<template>
+  <div class="base-dialog">
+    <el-dialog
+      :class="dialogClass"
+      v-el-drag-dialog="dragDialog"
+      :type="type"
+      :width="width"
+      :custom-class="customClass"
+      :fullscreen="fullscreen"
+      :title="title"
+      :close-on-click-modal="closeOnClickModal"
+      :append-to-body="appendToBody"
+      :visible.sync="visible"
+      :before-close="beforeClose"
+      :show-close="showClose"
+      v-if="visible"
+      @closed="closed"
+      @close="closeMethod"
+      :destroy-on-close="destroyOnClose"
+      :modal='modal'
+    >
+      <slot name="body" />
+      <div v-if="footer" slot="footer">
+        <slot name="footer" />
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import elDragDialog from "@/directive/el-drag-dialog"; // 引入拖拽指令
+export default {
+  name: "mec-dialog",
+  directives: { elDragDialog },
+  props: {
+    appendToBody: {
+      type: Boolean,
+      default: false,
+    }, // 是否嵌套
+    closeOnClickModal: {
+      type: Boolean,
+      default: false,
+    }, // 是否可以点击关闭
+    footer: {
+      type: Boolean,
+      default: true,
+    }, // 是否显示底部
+    title: {
+      type: String,
+      default: "",
+    }, // 对话框title
+    type: {
+      type: String,
+      default: "",
+    }, // 对话框类型：1.基础表单[base-dialog-form] 2.表格[base-dialog-table] 3.全屏 [base-dialog-fullscreen]
+    width: {
+      type: String,
+      default: "",
+    }, // 对话框宽度800px 或 50%
+    destroyOnClose: {
+      type: Boolean,
+      default: true,
+    },
+    beforeClose: Function, // 关闭回调函数
+    dialogClass: {
+      //class
+      type: String,
+      default: "",
+    },
+    // 是否显示叉号
+    showClose: {
+      default: true,
+      type: Boolean
+    },
+    //是否需要遮罩层
+    modal:{
+      default: true,
+      type: Boolean
+    },
+    dragDialog: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  data() {
+    return {
+      visible: false,
+      fullscreen: false,
+    };
+  },
+  computed: {
+    customClass() {
+      let className = "";
+      switch (this.type) {
+        case "form":
+          className = "base-dialog-form";
+          break;
+        case "table":
+          className = "base-dialog-table";
+          break;
+        case "fullscreen":
+          className = "base-dialog-fullscreen";
+          break;
+      }
+      return className;
+    },
+  },
+  created() {
+    this.type === "fullscreen" && (this.fullscreen = true);
+  },
+  methods: {
+    open() {
+      this.visible = true;
+    },
+    close() {
+      this.visible = false;
+    },
+    closed() {
+      this.$emit("closed");
+    },
+    closeMethod() {
+      this.$emit("close");
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.base-dialog {
+  text-align: left;
+}
+/deep/.el-dialog__wrapper {
+  overflow: hidden;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  .el-dialog {
+    display: flex;
+    flex-direction: column;
+    border-radius: 8px;
+    margin: 0;
+    margin-top: 0 !important;
+    .el-dialog__header {
+      text-align: left;
+      background-color: #efefef;
+      height: 48px;
+      line-height: 48px;
+      padding: 0 20px;
+      color: #fff;
+      border-top-left-radius: 8px;
+      border-top-right-radius: 8px;
+      font-weight: bold;
+
+      .el-dialog__title {
+        font-size: 16px;
+        // font-weight: bold;
+      }
+
+      .el-dialog__headerbtn {
+        top: 12px;
+      }
+    }
+
+    .el-dialog__body {
+      flex: 1;
+      overflow: auto;
+      padding: 20px;
+      padding-bottom: 52px;
+    }
+
+    .el-dialog__footer {
+      box-sizing: border-box;
+      padding: 10px 20px;
+      border: none;
+      background-color: #efefef;
+      border-bottom-left-radius: 8px;
+      border-bottom-right-radius: 8px;
+    }
+  }
+
+  .base-dialog-form {
+    height: auto;
+
+    .el-dialog__body {
+      padding: 20px 20px 0 20px;
+    }
+
+    .el-dialog__footer {
+      height: 32px;
+      border: none;
+      background-color: #efefef;
+      border-bottom-left-radius: 8px;
+      border-bottom-right-radius: 8px;
+    }
+
+    .custom-table {
+      // 取消表格下边线
+      tbody tr:last-child td {
+        border-bottom: none !important;
+      }
+    }
+  }
+
+  .base-dialog-table {
+    height: 90vh;
+    margin-top: 5vh !important;
+  }
+
+  .base-dialog-fullscreen {
+    height: 100vh;
+    width: 100vw;
+
+    .el-dialog__body {
+      padding: 10px;
+    }
+    .el-dialog__footer {
+      padding: 10px;
+      border: none;
+      background-color: #efefef;
+      border-bottom-left-radius: 8px;
+      border-bottom-right-radius: 8px;
+    }
+  }
+}
+</style>

package/src/components/MecForm/MecForm.js

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