新增复选框组

src/packages/hs-checkbox-group/index.vue

+<template>
+  <div
+    class="hsInputBox"
+    :id='elId'
+  >
+    <div class="inputCurr">
+      <el-checkbox-group v-model="value_inner">
+        <el-checkbox
+          v-for="(item,index) in dataList"
+          :key='index'
+          :label='item.label'
+          :disabled='item.disabled'
+        >
+        </el-checkbox>
+      </el-checkbox-group>
+    </div>
+    <jsoneditor
+      v-model='jsoneditorVisible'
+      :elInfo='elInfo'
+      :layout='layout'
+      :jsoneditorCloseAfter='jsoneditorCloseAfter'
+      :jsoneditorOpenAfter='jsoneditorOpenAfter'
+    >
+    </jsoneditor>
+  </div>
+</template>
+<script>
+import ucComponent from "../ucClass/uc_component";
+import jsoneditor from "../common/jsoneditor";
+import _ from "lodash";
+export default {
+  mixins: [ucComponent],
+  components: {
+    jsoneditor
+  },
+  name: "hsCheckbox",
+  props: {
+    allSourceData: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    elInfo: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    value: "",
+    layout: {},
+    jsoneditorCloseAfter: {
+      type: Function
+    },
+    jsoneditorOpenAfter: {
+      type: Function
+    }
+  },
+  watch: {
+    allSourceData: {
+      handler: function(newVal, oldVal) {
+        const { config, sourceData } = newVal;
+        this.initConfigData(config, sourceData);
+      },
+      deep: true
+    },
+    value(val) {
+      this.value_inner = val;
+    },
+    value_inner(val) {
+      this.$emit("input", val);
+    }
+  },
+  data() {
+    return {
+      elId: "",
+      value_inner: "",
+      jsoneditorVisible: false,
+      configData: {
+        title: ""
+      },
+      dataList: []
+    };
+  },
+  mounted() {
+    this.$nextTick(() => {
+      const { config, sourceData } = this.allSourceData;
+      this.initConfigData(config, sourceData);
+    });
+  },
+  methods: {
+    initConfigData(config, sourceData) {
+      this.initConfig(_.cloneDeep(config));
+      this.initConfig(_.cloneDeep(sourceData));
+    },
+    initConfig(config = {}) {
+      this.configData = Object.assign(this.configData, config);
+    },
+    initData(list = []) {
+      this.dataList = list;
+    }
+  }
+};
+</script>
+<style scoped>
+.hsInputBox {
+  padding: 1px;
+  width: 100%;
+  height: 100%;
+  display: flex;
+}
+
+.inputCurr {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+</style>

src/packages/hs-input/index.vue

 <template>
-  <div class="hsInputBox" :id='elId'>
-     <div class="inputTitle" v-if='title'>{{title}}</div>
-     <div class="inputCurr">
-          <el-input
-          :size='size'
-          @keyup.enter.native="submitInput"
-          v-model="value_inner"
-          @input='inputFun'
-          @change='changeFun'
-          @blur="inputBlur"
-          :disabled="isReadOnly"
-          :placeholder="placeholder||elInfo.placeholder"></el-input>
-     </div>
-    <jsoneditor v-model='jsoneditorVisible'
-                :elInfo='elInfo'
-                :layout='layout'
-                :jsoneditorCloseAfter='jsoneditorCloseAfter'
-                :jsoneditorOpenAfter='jsoneditorOpenAfter'
-                >
+  <div
+    class="hsInputBox"
+    :id='elId'
+  >
+    <div
+      class="inputTitle"
+      v-if='configData.title'
+    >{{configData.title}}</div>
+    <div class="inputCurr">
+      <el-input
+        :clearable='clearable'
+        :size='configData.size'
+        @clear='clear'
+        @keyup.enter.native="submitInput"
+        v-model="value_inner"
+        @input='inputFun'
+        @change='changeFun'
+        @blur="inputBlur"
+        :disabled="isReadOnly"
+        :placeholder="configData.placeholder"
+      ></el-input>
+    </div>
+    <jsoneditor
+      v-model='jsoneditorVisible'
+      :elInfo='elInfo'
+      :layout='layout'
+      :jsoneditorCloseAfter='jsoneditorCloseAfter'
+      :jsoneditorOpenAfter='jsoneditorOpenAfter'
+    >
     </jsoneditor>
   </div>
 </template>
 <script>
-import ucComponent from '../ucClass/uc_component'
-import uuidv1 from 'uuid/v1'
-import jsoneditor from '../common/jsoneditor'
+import ucComponent from "../ucClass/uc_component";
+import uuidv1 from "uuid/v1";
+import jsoneditor from "../common/jsoneditor";
+import _ from "lodash";
 export default {
   mixins: [ucComponent],
   components: {
     jsoneditor
   },
-  name: 'hsInput',
+  name: "hsInput",
   props: {
     prop: {},
     formData: {
       type: Object,
       default() {
-        return {}
+        return {};
       }
     },
     allSourceData: {
       type: Object,
       default() {
-        return {}
+        return {};
       }
     },
     elInfo: {
       type: Object,
       default() {
-        return {}
+        return {};
       }
     },
-    value: '',
+    value: "",
     layout: {},
     jsoneditorCloseAfter: {
       type: Function,
       default() {
-        return () => {}
+        return () => {};
       }
     },
     jsoneditorOpenAfter: {
       type: Function,
       default() {
-        return () => {}
+        return () => {};
       }
     },
     readonly: {
@@ -73,120 +84,123 @@ export default {
     formData: {
       handler: function(newVal, oldVal) {
         if (!this.isInputed) {
-          const linkProps = this.configData.linkProps || []
+          const linkProps = this.configData.linkProps || [];
           if (!linkProps.length) {
-            this.inputComputed(this.value)
+            this.inputComputed(this.value);
           }
           linkProps.forEach(item => {
             if (this.formData[`_${item}_`]) {
-              this.inputComputed(this.value)
+              this.inputComputed(this.value);
             }
-          })
+          });
         }
       },
       deep: true
     },
     allSourceData: {
       handler: function(newVal, oldVal) {
-        const { config } = newVal
-        this.initConfig(config)
+        const { config } = newVal;
+        this.initConfig(config);
       },
       deep: true
     },
     value(val, oldVal) {
-      this.value_inner = val
-      this.valueChange(val)
+      this.value_inner = val;
+      this.valueChange(val);
     },
     value_inner(val) {
-      this.$emit('input', val)
+      this.$emit("input", val);
     }
   },
   computed: {
     isReadOnly: function() {
-      return this.readonly || this.configData.disabled
+      return this.readonly || this.configData.disabled;
     }
   },
   data() {
     return {
-      elId: '',
-      value_inner: '',
+      elId: "",
+      value_inner: "",
       jsoneditorVisible: false,
-      title: '',
-      placeholder: '',
-      size: 'mini',
-      configData: {},
-      isInputed: false
-    }
+      isInputed: false,
+      clearable: true,
+      configData: {
+        title: "",
+        placeholder: "",
+        size: "mini",
+        clearable: true,
+        placeholder: ""
+      }
+    };
   },
   created() {
-    this.elId = uuidv1() // 获取随机id
+    this.elId = uuidv1(); // 获取随机id
   },
   mounted() {
-    const { config } = this.allSourceData
-    this.initConfig(config)
+    const { config } = this.allSourceData;
+
+    this.initConfig(config);
   },
   methods: {
     inputBlur() {
-      this.isInputed = false
-      this.formData[`_${this.prop}_`] = false
+      this.isInputed = false;
+      this.formData[`_${this.prop}_`] = false;
     },
     execAction(actionName, value) {
-      const type = typeof actionName
-      if (type === 'function') {
-        actionName(value, this.formData)
+      const type = typeof actionName;
+      if (type === "function") {
+        actionName(value, this.formData);
       }
     },
     valueChange(value) {
-      const { changing } = this.configData
-      this.execAction(changing, value)
+      const { changing } = this.configData;
+      this.execAction(changing, value);
+    },
+    clear(value) {
+      const { clear } = this.configData;
+      this.execAction(clear, value);
     },
     inputComputed(value) {
-      const { computed } = this.configData
-      this.execAction(computed, value)
+      const { computed } = this.configData;
+      this.execAction(computed, value);
     },
     changeFun(value) {
-      const { changeed } = this.configData
-      this.execAction(changeed, value)
+      const { changeed } = this.configData;
+      this.execAction(changeed, value);
     },
     inputFun(value) {
-      this.isInputed = true
-      this.formData[`_${this.prop}_`] = true
-      const { inputed } = this.configData
-      this.execAction(inputed, value)
+      this.isInputed = true;
+      this.formData[`_${this.prop}_`] = true;
+      const { inputed } = this.configData;
+      this.execAction(inputed, value);
     },
     initConfig(config) {
-      if (typeof config !== 'object') return
-      const { title, placeholder, size } = config
-      this.configData = config
-      this.title = title
-      this.placeholder = placeholder
-
-      if (size) {
-        this.size = size
-      }
+      if (typeof config !== "object") return;
+      const config_ = _.cloneDeep(config);
+      this.configData = Object.assign(this.configData, config_);
     },
     submitInput(val) {
-      const parm = {}
-      parm[this.elInfo.prop] = this.value_inner
-      this.$emit('enterInput', parm)
+      const { entered } = this.configData;
+      this.execAction(entered, value, this.elInfo);
+      this.$emit("enterInput", this.value_inner, this.elInfo);
     }
   }
-}
+};
 </script>
 <style scoped>
-.hsInputBox{
+.hsInputBox {
   padding: 1px;
-  width:100%;
-  height:100%;
+  width: 100%;
+  height: 100%;
   display: flex;
 }
-.inputTitle{
-  flex:1;
+.inputTitle {
+  flex: 1;
   display: flex;
   justify-content: center;
   align-items: center;
 }
-.inputCurr{
+.inputCurr {
   flex: 3;
   display: flex;
   justify-content: center;