优化组件

src/components/HelloWorld.vue

 <template>
   <div style="width:500px">
-    <hsSelectPlus
-      ref='select'
-      v-model="selectValue"
-      :allSourceData='allSourceData'
-      :requestMethod='requestMethod'
-    ></hsSelectPlus>
-    <el-button @click="change1">change1</el-button>
-    <el-button @click="change2">change2</el-button>
-    <hsCheckboxGroup
+    <hsSwitch
       v-model="checkList"
       :allSourceData='configData'
-    ></hsCheckboxGroup>
+    ></hsSwitch>
   </div>
 
 </template>
@@ -21,77 +13,20 @@ export default {
   mixins: [uc],
   data() {
     return {
-      checkList:'B,A',
-      selectValue: "1052069380861628416",
-      allSourceData: {
-        config: {
-          url: "",
-          isInnerRequest: true,
-          proxyTag: "commonUtilAPI",
-          ref: {
-            const_id: "0",
-            table_name: "im_store_group",
-            columns: "id,name",
-            remote_condition: "",
-            displayfield: "",
-            writebackfield: []
-          },
-          dyncQueryParms: {},
-          multiple: false,
-          disabled: false,
-          size: "mini",
-          clearable: true,
-          title: "标题",
-          placeholder: "请选择",
-          value: "id",
-          label: "name",
-          is_computed: false
-        },
-        sourceData: []
-      },
-      show: false,
-      config: {
-        url: "",
-        proxyTag: "commonUtilAPI",
-        ref: {
-          const_id: "0",
-          table_name: "im_store_group",
-          columns: "id,name",
-          remote_condition: "",
-          displayfield: "",
-          writebackfield: []
-        },
-        dyncQueryParms: {},
-        multiple: false,
-        disabled: false,
-        size: "mini",
-        clearable: true,
-        title: "标题",
-        placeholder: "请选择",
-        value: "id",
-        label: "name",
-        is_computed: false
-      },
+      value1: "",
+      checkList: "",
       configData: {
-        sourceData: [
-          {
-            label: "A"
-          },
-          {
-            label: "B"
+        sourceData: [],
+        config: {
+          activeText: "A",
+          inactiveText: "B",
+          changeed: () => {
+            console.log(21312);
           }
-        ],
-        config: {}
+        }
       }
     };
   },
-  methods: {
-    change1() {
-      this.allSourceData.sourceData = [{ value: 1, label: 2 }];
-    },
-    change2() {
-      this.allSourceData.sourceData = [{ value: 2, label: 3 }];
-    }
-  }
+  methods: {}
 };
 </script>
\ No newline at end of file

src/packages/hs-computed/index.vue

 <template>
-  <div class="hsInputBox" :id='elId'>
-     <div class="inputCurr">
-          <span>{{valueTxt}}</span>
-     </div>
-    <jsoneditor v-model='jsoneditorVisible'
-                :elInfo='elInfo'
-                :layout='layout'
-                :jsoneditorCloseAfter='jsoneditorCloseAfter'
-                :jsoneditorOpenAfter='jsoneditorOpenAfter'
-                 >
+  <div
+    class="hsInputBox"
+    :id='elId'
+  >
+    <div class="inputCurr">
+      <span>{{valueTxt}}</span>
+    </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 ucComponent from "../ucClass/uc_component";
+import jsoneditor from "../common/jsoneditor";
 export default {
   mixins: [ucComponent],
   components: {
     jsoneditor
   },
-  name: 'hsComputed',
+  name: "hsComputed",
   props: {
     allSourceData: {
       type: Object,
       default() {
-        return {}
+        return {};
       }
     },
     elInfo: {
       type: Object,
       default() {
-        return {}
+        return {};
       }
     },
-    value: '',
+    value: "",
     layout: {},
     jsoneditorCloseAfter: {
       type: Function
@@ -45,73 +49,72 @@ export default {
     formData: {
       type: Object,
       default() {
-        return {}
+        return {};
       }
     }
   },
   watch: {
     allSourceData: {
       handler: function(newVal, oldVal) {
-        const { config } = newVal
-        this.initConfig(config)
+        const { config } = newVal;
+        this.initConfig(config);
       },
       deep: true
     },
     value(val) {
-      this.value_inner = val
+      this.value_inner = val;
     },
     value_inner(val) {
-      this.$emit('input', val)
+      this.$emit("input", val);
     },
     formData: {
       handler: function(newVal, oldVal) {
-        this.computedTxt(newVal)
+        this.valueTxt = this.computedTxt(newVal);
       },
       deep: true
     }
   },
   data() {
     return {
-      elId: '',
-      value_inner: '',
+      elId: "",
+      value_inner: "",
       jsoneditorVisible: false,
       sourceData: [],
-      configData: {
-      },
-      valueTxt: '0'
-    }
+      configData: {},
+      valueTxt: "0"
+    };
   },
   mounted() {
     this.$nextTick(() => {
-      const { config, sourceData } = this.allSourceData
-      this.sourceData = sourceData
-      this.initConfig(config)
-    })
+      const { config, sourceData } = this.allSourceData;
+      this.sourceData = sourceData;
+      this.initConfig(config);
+    });
   },
   methods: {
     computedTxt() {
-      const { click } = this.configData
-      const type = typeof click
-      if (type === 'function') {
-        click(this.formData)
+      const { click } = this.configData;
+      const type = typeof click;
+      if (type === "function") {
+        return click(this.formData);
       }
     },
     initConfig(config = {}) {
-      this.configData = Object.assign(this.configData, config)
-      this.computedTxt()
+      this.configData = Object.assign(this.configData, config);
+      this.valueTxt = this.computedTxt();
     }
   }
-}
+};
 </script>
 <style scoped>
-.hsInputBox{
+.hsInputBox {
   padding: 1px;
-  width:100%;
-  height:100%;
+  width: 100%;
+  height: 100%;
   display: flex;
 }
 
-.inputCurr{
+.inputCurr {
   display: flex;
   justify-content: center;
   align-items: center;

src/packages/hs-date-picker/index.vue

 <template>
-  <div :id='elId' class="selectBoxPlus" style='width:100%;height:100%;'>
-    <div class="contarnBox" style='width:100%;height:100%;'>
-        <div class="selectTitle" v-show='configData.title'>{{configData.title}}</div>
-         <div class="selectCurr" style='width:80%;height:100%;'>
-            <template  v-if='elInfo.el=="hsDatePicker"'>
-               <el-date-picker
-                  size='mini'
-                  v-model="value_inner"
-                  :type="configData.type"
-                  :value-format="configData.valueFormat"
-                  :placeholder="configData.placeholder"
-                  :range-separator="configData.rangeSeparator"
-                  :start-placeholder="configData.startPlaceholder"
-                  :end-placeholder="configData.endPlaceholder">
-              </el-date-picker>
-          </template>
-        </div>
+  <div
+    :id='elId'
+    class="selectBoxPlus"
+    style='width:100%;height:100%;'
+  >
+    <div
+      class="contarnBox"
+      style='width:100%;height:100%;'
+    >
+      <div
+        class="selectTitle"
+        v-show='configData.title'
+      >{{configData.title}}</div>
+      <div
+        class="selectCurr"
+        style='width:80%;height:100%;'
+      >
+        <el-date-picker
+          @change='changed'
+          size='mini'
+          v-model="value_inner"
+          :type="configData.type"
+          :value-format="configData.valueFormat"
+          :placeholder="configData.placeholder"
+          :range-separator="configData.rangeSeparator"
+          :start-placeholder="configData.startPlaceholder"
+          :end-placeholder="configData.endPlaceholder"
+        >
+        </el-date-picker>
+      </div>
     </div>
-    <jsoneditor v-model='jsoneditorVisible'
-                :elInfo='elInfo'
-                :layout='layout'
-                :jsoneditorCloseAfter='jsoneditorCloseAfter'
-                :jsoneditorOpenAfter='jsoneditorOpenAfter'
-                >
+    <jsoneditor
+      v-model='jsoneditorVisible'
+      :elInfo='elInfo'
+      :layout='layout'
+      :jsoneditorCloseAfter='jsoneditorCloseAfter'
+      :jsoneditorOpenAfter='jsoneditorOpenAfter'
+    >
     </jsoneditor>
   </div>
 </template>
 <script>
-import jsoneditor from '../common/jsoneditor'
-import ucComponent from '../ucClass/uc_component'
+import jsoneditor from "../common/jsoneditor";
+import ucComponent from "../ucClass/uc_component";
 export default {
   mixins: [ucComponent],
   components: {
     jsoneditor
   },
-  name: 'hsDatePicker',
+  name: "hsDatePicker",
   props: {
     elInfo: {
       type: Object,
       default() {
-        return {}
+        return {};
       }
     },
     allSourceData: {
       type: Object,
       default() {
-        return {}
+        return {};
       }
     },
-    value: '',
+    value: "",
     layout: {},
     jsoneditorCloseAfter: {
       type: Function
@@ -60,81 +74,92 @@ export default {
   watch: {
     allSourceData: {
       handler: function(newVal, oldVal) {
-        const { config } = newVal
-        this.initConfig(config)
+        const { config } = newVal;
+        this.initConfig(config);
       },
       deep: true
     },
     value(val) {
-      this.value_inner = val
+      this.value_inner = val;
     },
     value_inner(val) {
-      this.$emit('input', val)
+      this.$emit("input", val);
     }
   },
   data() {
     return {
-      elId: '',
-      value_inner: '',
+      elId: "",
+      value_inner: "",
       jsoneditorVisible: false,
       configData: {}
-    }
+    };
   },
   mounted() {
-    const { config } = this.allSourceData
-    this.initConfig(config)
+    const { config } = this.allSourceData;
+    this.initConfig(config);
   },
   methods: {
+    execAction(actionName, value) {
+      const type = typeof actionName;
+      if (type === "function") {
+        actionName(value, this.formData);
+      }
+    },
+    changed(value) {
+      this.$emit('changed',value);
+      const { changed } = this.configData;
+      this.execAction(changed,value)
+    },
     initConfig(config) {
-      if (!config) return
-      this.configData = config
+      if (!config) return;
+      this.configData = config;
     }
   }
-}
+};
 </script>
 <style scoped>
-.hsInputBox{
+.hsInputBox {
   padding: 1px;
-  width:100%;
-  height:100%;
+  width: 100%;
+  height: 100%;
   display: flex;
 }
-.hsInputInner{
+.hsInputInner {
   height: 80%;
   width: 80%;
 }
-.inputTitle{
-  flex:1;
+.inputTitle {
+  flex: 1;
   display: flex;
   justify-content: center;
   align-items: center;
 }
-.inputCurr{
-  flex:1;
+.inputCurr {
+  flex: 1;
   display: flex;
   justify-content: center;
   align-items: center;
   height: 100%;
 }
-.contarnBox{
+.contarnBox {
   display: flex;
 }
-.selectTitle{
-  flex:1;
+.selectTitle {
+  flex: 1;
   display: flex;
   justify-content: center;
   align-items: center;
 }
-.selectCurr{
+.selectCurr {
   flex: 3;
   display: flex;
   justify-content: center;
   align-items: center;
 }
-.selectBoxPlus>>> .el-select>.el-input{
-    height: 100%;
+.selectBoxPlus >>> .el-select > .el-input {
+  height: 100%;
 }
-.selectBoxPlus>>>.el-select .el-input__inner{
+.selectBoxPlus >>> .el-select .el-input__inner {
   height: 100%;
 }
 </style>

src/packages/hs-switch/index.vue

 <template>
-  <div class="hsControlBoxOut" :id='elId'>
-     <div class="hsControlBoxInner">
-          <el-switch
-            v-model="value_inner"
-            :active-text="configData.activeText"
-            :inactive-text="configData.inactiveText"
-            @change='change'
-            :disabled='disabled'
-            >
-          </el-switch>
-     </div>
-    <jsoneditor v-model='jsoneditorVisible'
-                :elInfo='elInfo'
-                :layout='layout'
-                :jsoneditorCloseAfter='jsoneditorCloseAfter'
-                :jsoneditorOpenAfter='jsoneditorOpenAfter'
-                 >
+  <div
+    class="hsControlBoxOut"
+    :id='elId'
+  >
+    <div class="hsControlBoxInner">
+      <el-switch
+        v-model="value_inner"
+        :active-text="configData.activeText"
+        :inactive-text="configData.inactiveText"
+        @change='change'
+        :disabled='configData.disabled'
+      >
+      </el-switch>
+    </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 ucComponent from "../ucClass/uc_component";
+import jsoneditor from "../common/jsoneditor";
 export default {
   mixins: [ucComponent],
   components: {
     jsoneditor
   },
-  name: 'hsSwitch',
+  name: "hsSwitch",
   props: {
     disabled: {
       type: Boolean,
@@ -36,16 +40,16 @@ export default {
     allSourceData: {
       type: Object,
       default() {
-        return {}
+        return {};
       }
     },
     elInfo: {
       type: Object,
       default() {
-        return {}
+        return {};
       }
     },
-    value: '',
+    value: "",
     layout: {},
     jsoneditorCloseAfter: {
       type: Function
@@ -57,74 +61,84 @@ export default {
   watch: {
     allSourceData: {
       handler: function(newVal, oldVal) {
-        const { config } = newVal
-        this.initConfig(config)
+        const { config } = newVal;
+        this.initConfig(config);
       },
       deep: true
     },
     value(val) {
       // 只接受0、1、true、false
-      if (typeof val === 'boolean') {
-        this.value_inner = val
+      if (typeof val === "boolean") {
+        this.value_inner = val;
       } else {
-        this.value_inner = !!Number(val)
+        this.value_inner = !!Number(val);
       }
     },
     value_inner(val) {
-      if (typeof this.value === 'boolean') {
-        this.$emit('input', val)
+      if (typeof this.value === "boolean") {
+        this.$emit("input", val);
       } else {
-        let v = val
-        if (typeof this.value === 'string') {
-          v = Number(val) + ''
+        let v = val;
+        if (typeof this.value === "string") {
+          v = Number(val) + "";
         } else {
-          v = Number(val)
+          v = Number(val);
         }
-        this.$emit('input', v)
+        this.$emit("input", v);
       }
     }
   },
   data() {
     return {
-      elId: '',
+      elId: "",
       value_inner: false,
       jsoneditorVisible: false,
       sourceData: [],
       configData: {
+        activeText:'',
+        inactiveText:''
       }
-    }
+    };
   },
   mounted() {
     this.$nextTick(() => {
-      const { config, sourceData } = this.allSourceData
-      this.sourceData = sourceData
-      this.initConfig(config)
-      if (typeof this.value === 'boolean') {
-        this.value_inner = this.value
+      const { config, sourceData } = this.allSourceData;
+      this.sourceData = sourceData;
+      this.initConfig(config);
+      if (typeof this.value === "boolean") {
+        this.value_inner = this.value;
       } else {
-        this.value_inner = !!Number(this.value)
+        this.value_inner = !!Number(this.value);
       }
-    })
+    });
   },
   methods: {
+    execAction(actionName, value) {
+      const type = typeof actionName;
+      if (type === "function") {
+        actionName(value, this.formData);
+      }
+    },
     change(val) {
+      const { changeed } = this.configData;
+      this.execAction(changeed)
     },
     initConfig(config = {}) {
-      this.configData = Object.assign(this.configData, config)
+      this.configData = Object.assign(this.configData, config);
     }
   }
-}
+};
 </script>
 <style scoped>
-.hsControlBoxOut{
+.hsControlBoxOut {
   padding: 1px;
-  width:100%;
-  height:100%;
+  width: 100%;
+  height: 100%;
   display: flex;
-  box-sizing:border-box;
+  box-sizing: border-box;
 }
 
-.hsControlBoxInner{
+.hsControlBoxInner {
   display: flex;
   justify-content: center;
   align-items: center;