gyyg-components 0.2.7 → 0.2.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gyyg-components",
-  "version": "0.2.7",
+  "version": "0.2.8",
   "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,39 @@
       @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 :formGroups="formGroups"></mec-search-form>
 
-    </mec-search-form>
   </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);
+      formGroups: {
+        abLifeSupport: {
+          componentName: 'mec-radio',
+          label: '生命支持',
+          labelWidth: "100px",
+          options: [
+            {
+              label: '是',
+              value: true
             },
-            'current-change': (val) => {
-              console.log('Page changed:', val);
+            {
+              label: '否',
+              value: false
             },
-            'show': () => {
-              console.log('Dropdown shown');
-            },
-            'input': (val) => {
-              console.log('Input changed:', val);
-            },
-            'search': (val) => {
-              console.log('Search:', val);
-            },
-            'refresh': () => {
-              console.log('Refreshed');
-            }
-          }
+          ],
+          value: '',
         }
-      ]
+      }
     };
   },
   methods: {
-    handleSelectChange(val) {
-      console.log('Selected value changed:', val);
-    },
-    handleSelectClear() {
-      console.log('Selection cleared');
-    }
-  }
+  },
   // methods: {
   //   handleRowClick(row) {
   //     console.log('Row clicked:', row);
@@ -135,7 +61,7 @@ export default {
   //   },
   //   show() {
   //     console.log('显示');
-      
+
   //   }
   // }
 };

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/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,226 @@
+<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" class="dialog-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;
+}
+.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;
+    }
+
+    .el-dialog__footer {
+      flex-shrink: 0;
+      box-sizing: content-box;
+      height: 32px;
+      padding: 10px;
+      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;

package/src/components/MecForm/MecForm.vue

@@ -0,0 +1,77 @@
+<template>
+	<el-form
+		ref="formData"
+		:model="formData"
+		:label-width="labelWidth"
+		:label-position="labelPosition"
+	>
+		<template v-for="(item, index) in formData">
+			<el-col
+				v-if="typeof item.displayWith !== 'function' || item.displayWith(formData, item)"
+				:span="item.col"
+				:style="item.style"
+				:key="index"
+			>
+				<el-form-item v-bind="item" :prop="getProp(item, index)" :rules="item.rules" :class="item.class">
+					<template slot="label">
+						<span v-if="item.label">
+							{{ item.label }}
+						<el-tooltip v-if="item.tooltip" class="item" effect="dark" :content="item.tooltip" placement="top">
+							<i class="el-icon-question"></i>
+						</el-tooltip>
+						</span>
+					</template>
+					<component
+						:is="item['componentName']"
+						v-model="item.value"
+						v-bind="item"
+						v-on="item.componentListeners"
+					></component>
+				</el-form-item>
+			</el-col>
+		</template>
+	</el-form>
+</template>
+<script>
+export default {
+	name: 'mec-form',
+	props: {
+		formData: {
+			required: true,
+		},
+		labelWidth: {
+			type: String,
+			default: '150px',
+		},
+		labelPosition: {
+			type: String,
+			default: 'right',
+		},
+	},
+	data() {
+		return {
+			loading: false,
+		};
+	},
+	computed: {},
+	methods: {
+        getProp(item, index) {
+            let propName = item.prop ? item.prop : index + ".value";
+            return propName;
+        },
+		validate() {
+			return new Promise((resolve, reject) => {
+				this.$refs.formData.validate(valid => {
+				if (valid) {
+					resolve(true);
+				} else {
+					resolve(false);
+				}
+				});
+			});
+		}
+	},
+};
+</script>
+<style lang="less">
+</style>