update for form-blocks

Author: BingBlog

src/components/block/form-modal/index.js

@@ -0,0 +1,3 @@
+import index from "./index.vue";
+
+export default index;

src/components/block/form-modal/index.vue

@@ -0,0 +1,111 @@
+<template>
+  <Modal
+    class="cp-block-form-modal"
+    v-model="openStatus"
+    :title="formTitle"
+    footer-hide
+  >
+    <div slot="title"><strong>{{formTitle}}</strong></div>
+    <FormGenerator
+      ref="FormGenerator"
+      :fields="formFields"
+      :model="model"
+      :options="formOptions"
+      @on-submit="handleSubmit"
+    />
+  </Modal>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      openStatus: false,
+      model: {}
+    };
+  },
+  // computed: {
+  //   computedFormModel() {
+  //     return Object.assign({}, this.formModel);
+  //   }
+  // },
+  props: {
+    defaultOpenStatus: {
+      type: Boolean,
+      default: false
+    },
+    // btnText: {
+    //   type: String,
+    //   default: ""
+    // },
+    formTitle: {
+      type: String,
+      default: ""
+    },
+    formFields: {
+      type: Array,
+      default() {
+        return {};
+      }
+    },
+    formModel: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    formOptions: {
+      type: Object,
+      default() {
+        return {}
+      }
+    }
+  },
+  watch: {
+    formModel: {
+      immediate: true,
+      deep: true,
+      handler(model) {
+        this.model = JSON.parse(JSON.stringify(model));
+      }
+    }
+  },
+  mounted() {
+    if (this.defaultOpenStatus) {
+      this.open();
+    }
+  },
+  methods: {
+    handleSubmit() {
+      this.$refs.FormGenerator.submit()
+        .then(data => {
+          // eslint-disable-next-line no-console
+          this.$emit("on-submit", data);
+          this.close();
+        })
+        .catch(valid => {
+          // eslint-disable-next-line no-console
+          // TODO
+          // this.$emit("on-valid-error", data);
+        });
+    },
+    open() {
+      this.openStatus = true;
+      this.$emit("on-open-status-change", true);
+    },
+    close() {
+      this.openStatus = false;
+      this.$emit("on-open-status-change", false);
+    }
+  }
+}
+</script>
+
+<style lang="less">
+.cp-block-form-modal {
+    .ivu-modal-body {
+      padding: 16px 32px;
+    }
+}
+
+</style>

src/components/block/form-multiple-modal/index.js

@@ -0,0 +1,3 @@
+import index from "./index.vue";
+
+export default index;

src/components/block/form-multiple-modal/index.vue

@@ -0,0 +1,80 @@
+<template>
+  <div id="multi-modal-container"></div>
+</template>
+
+<script>
+import Vue from "vue";
+import modalCom from "./modal.vue";
+
+export default {
+  props: {
+    formFields: {
+      type: Array,
+      default() {
+        return [];
+      }
+    }
+  },
+  data() {
+    return {
+      value: true
+    };
+  },
+  methods: {
+    open(model, title = '', fields = [], options = {}) {
+      console.log(model, fields = [], title = '');
+      if (fields.length === 0) {
+        fields = this.formFields;
+      }
+      this.modalGenerator(fields, model, title, options);
+    },
+
+    close() {
+
+    },
+
+    closeAll() {
+
+    },
+
+    modalGenerator(formFields = [], formModel = {}, formTitle = "", formOptions = {}) {
+      // const self = this;
+      // const dynimicModal = Vue.component("dynimicModal", {
+      //   render(h) {
+      //     return h(modalCom, {
+      //       props: {
+      //         formFields,
+      //         formModel,
+      //         formTitle,
+      //         formOptions
+      //       },
+      //       on: {
+      //         'on-submit': function(data) {
+      //           self.$emit('on-submit', data);
+      //         }
+      //       }
+      //     });
+      //   }
+      // });
+      // const instance = new dynimicModal().$mount();
+
+      const modalComponentClass = Vue.extend(modalCom);
+      const instance = new modalComponentClass({
+        propsData: {
+          formFields,
+          formModel,
+          formTitle,
+          formOptions
+        },
+      });
+      instance.$mount();
+      instance.$on('on-submit', data => {
+        this.$emit('on-submit', data);
+      });
+      this.$el.appendChild(instance.$el);
+    }
+  }
+};
+</script>
+
+<style></style>

src/page/form-multi-modal/modal-com.vue renamed to src/components/block/form-multiple-modal/modal.vue

@@ -1,16 +1,18 @@
 <template>
   <Modal
+    class="cp-block-multiple-form-modal"
     ref="modal"
     :value="value"
     :styles="styles"
-    :title="title"
+    :title="formTitle"
     footer-hide
     draggable
   >
     <FormGenerator
       ref="FormGenerator"
-      :fields="fields"
+      :fields="formFields"
       :model="model"
+      :options="formOptions"
       @on-submit="handleSave"
       @on-reset="handelReset"
     />
@@ -25,30 +27,45 @@ function getRandomInt(min, max) {
 }
 export default {
   props: {
-    title: {
+    formTitle: {
       type: String,
       default: ""
     },
-    fields: {
+    formFields: {
       type: Array,
       default() {
         return [];
-      },
-      required: true
+      }
     },
-    model: {
+    formModel: {
       type: Object,
       default() {
         return {};
       }
+    },
+    formOptions: {
+      type: Object,
+      default() {
+        return {}
+      }
     }
   },
   data() {
     return {
       styles: {},
-      value: true
+      value: true,
+      model: {}
     };
   },
+  watch: {
+    formModel: {
+      immediate: true,
+      deep: true,
+      handler(model) {
+        this.model = JSON.parse(JSON.stringify(model));
+      }
+    }
+  },
   mounted() {
     this.$refs.modal.dragData = {
       x: getRandomInt(0, 700),
@@ -66,9 +83,8 @@ export default {
       this.$refs.FormGenerator.submit()
         .then(data => {
           // eslint-disable-next-line no-console
-          console.log("update model", data);
+          this.$emit("on-submit", data);
           this.value = false;
-          this.$Message.info("update success!");
         })
         .catch(valid => {
           // eslint-disable-next-line no-console
@@ -80,4 +96,11 @@ export default {
 };
 </script>
 
-<style></style>
+<style lang="less">
+.cp-block-multiple-form-modal {
+    .ivu-modal-body {
+      padding: 16px 32px;
+    }
+}
+
+</style>

src/components/block/form-popover/index.js

@@ -0,0 +1,3 @@
+import index from "./index.vue";
+
+export default index;

src/components/block/form-popover/index.vue

@@ -0,0 +1,89 @@
+<template>
+  <Poptip class="cp-block-form-popover" placement="left-start">
+    <Button type="primary" size="small">{{btnText}}</Button>
+    <div slot="title"><strong>{{formTitle}}</strong></div>
+    <div slot="content">
+      <FormGenerator
+        ref="FormGenerator"
+        :fields="formFields"
+        :options="formOptions"
+        :model="formModel"
+        @on-submit="handleSubmit"
+      />
+    </div>
+  </Poptip>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      model: {}
+    };
+  },
+  props: {
+    btnText: {
+      type: String,
+      default: ""
+    },
+    formTitle: {
+      type: String,
+      default: ""
+    },
+    formFields: {
+      type: Array,
+      default() {
+        return {};
+      }
+    },
+    formModel: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    formOptions: {
+      type: Object,
+      default() {
+        return {}
+      }
+    }
+  },
+  watch: {
+    formModel: {
+      immediate: true,
+      deep: true,
+      handler(model) {
+        this.model = JSON.parse(JSON.stringify(model));
+      }
+    }
+  },
+  methods: {
+    handleSubmit() {
+      this.$refs.FormGenerator.submit()
+        .then(data => {
+          // eslint-disable-next-line no-console
+          this.$emit("on-submit", data);
+        })
+        .catch(valid => {
+          // eslint-disable-next-line no-console
+          // TODO
+          // this.$emit("on-valid-error", data);
+        });
+    }
+  }
+}
+</script>
+
+<style lang="less">
+.cp-block-form-popover {
+  .ivu-poptip-body-content {
+    text-align: left;
+    width: 300px;
+  }
+  &-pagenation {
+    margin-top: 20px;
+    text-align: right;
+  }
+}
+</style>

src/page/form-inline-table/index.vue

@@ -74,6 +74,7 @@ export default {
       });
     },
     handleSaveEvent($event, index, row) {
+      this.$Message.info(`update success!${JSON.stringify(row)}`);
       this.data.splice(
         index,
         1,